logo
down
shadow

Javascript/jquery - Wrap text with tag at specific position


Javascript/jquery - Wrap text with tag at specific position

Content Index :

Javascript/jquery - Wrap text with tag at specific position
Tag : javascript , By : sgmichelsen
Date : November 23 2020, 09:01 AM

this one helps. Here is a simple example that doesn't require jQuery.
Example Here
[
  { start: 0, end: 5 },
  { start: 22, end: 27 }
]
var p = document.querySelector('p'),
    textArray = p.innerText.split(''),
    offsets = [{ start: 0, end: 5 }, { start: 22, end: 27 }];

offsets.forEach(function (offset) {    
    textArray[offset.start] = '<em>' + textArray[offset.start];
    textArray[offset.end] = '</em>' + textArray[offset.end];
});

p.innerHTML = textArray.join('');
<p>hello world. This is a test paragraph.</p>
var p = document.querySelector('p'),
    textArray = p.innerText.split(''),
    offsets = [];

Array.prototype.forEach.call(document.querySelectorAll('lst > int[name="start"]'), function (el) {
    offsets.push({start: el.innerText, end: el.nextElementSibling.innerText});
});

offsets.forEach(function (offset) {    
    textArray[offset.start] = '<em>' + textArray[offset.start];
    textArray[offset.end] = '</em>' + textArray[offset.end];
});

p.innerHTML = textArray.join('');
<p>hello world. This is a test paragraph.</p>

<lst name="offsets">
  <int name="start">0</int>
  <int name="end">5</int>
  <int name="start">22</int>
  <int name="end">27</int>
</lst>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

How to use JavaScript or jQuery to wrap the selected text into a web page in a specific tag?


Tag : javascript , By : brennen
Date : March 29 2020, 07:55 AM
it fixes the issue FF only example because of range.createContextualFragment but something to work with. got to get to sleep!
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .highlight {color: red; }
    </style>
    <script>
        function highlight() {
            var text, sel, range;
            if (window.getSelection) {
                text = window.getSelection().toString();
                sel = window.getSelection();
                if (sel.rangeCount) {
                    range = sel.getRangeAt(0);
                    range.deleteContents();
                    range.insertNode(range.createContextualFragment('<span class="highlight">'+text+'</span>'));
                }
            } else if (document.selection && document.selection.createRange) {
                text = document.selection.createRange().text;
                range = document.selection.createRange();
                range.innerHTML = '<span class="highlight">'+text+'</span>';
            }
        }
    </script>
</head>

<body>
<p>lorem ipsum donor kebab</p>
<button onclick="highlight()">Click me</button>
</body>
</html>

Tag : javascript , By : firebasket
Date : March 29 2020, 07:55 AM
This might help you You can use .wrapInner()
$('.mg_label_7').wrapInner('<div id="hello"></div>')

javascript to wrap specific text using regex capture but exclude html tag attributes


Tag : javascript , By : algoRhythm99
Date : March 29 2020, 07:55 AM
To fix this issue So your regex seems a lot more complicated than it needs to be:
\s([0-9A-Z]{2,})\s does a perfect job of matching what you want in the example:

How to wrap sibling text of elements with tag using javascript/jquery?


Tag : javascript , By : Navin
Date : March 29 2020, 07:55 AM
it fixes the issue You need to use .contents() and .last() to select target text from end of .element and use .wrap() to wrap it with span tag.
$(".element").contents().last().wrap("<span class='data'></span>");
.data{color:blue}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="element">
  <span class="word">The</span>
  <span class="word">car</span>
  <span class="word">speed</span>
  <span class="word">was</span>
  40km/s
</span>

Wrap text in span after string - using jquery/javascript


Tag : javascript , By : xguru
Date : March 29 2020, 07:55 AM
Does that help I want to wrap text in span after the word "Price" using JavaScript/JQuery not php. I tried following but it is not working. I used an expression which I know from PHP. , You need to use .html to add spans
$('#Price').html(function() {
  return this.innerText.replace(/(.*)Price(.*)/,'$1 Price <span>$2</span>')
});
span { background-color:yellow }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 id="Price">T-shirt Price in Canada</h2>
$(function() {
  $('.price').html(function() {
    return this.innerText.replace(/(.*)Price(.*)/, '$1 Price <span>$2</span>')
  });
});
#PriceCAD span {
  background-color: yellow
}

#PriceMXN span {
  background-color: orange
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="price" id="PriceCAD">T-shirt Price in Canada</h2>
CAD 12
<h2 class="price" id="PriceMXN">T-shirt Price in Mexico</h2>
MXN 175
Related Posts Related QUESTIONS :
  • Axios function not returning any values with js
  • How to use firestore TIMESTAMP to create time-stamp in JavaScript
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • Using JavaScript to change CSS properties of SVG circles for all circles that was not clicked
  • Is there value in propTypeing repeat required properties at every level of nested components?
  • Call function if variable does not exist in a filter
  • localStorage value doesn't get updated automatically
  • React not updating state with setState correctly inside promises
  • Direct native JavaScript or jQuery method to get containing block of an element
  • Dynamic JSON object to Html Table
  • How to send Id and file to same controller?
  • How to Make a jQuery Table Cell(td) clickable to Run a Function?
  • Prevent the duplicate function onchange event jQuery
  • Reactjs Input Upload doesn't return local URL
  • An unexpected 'StartObject' node was found when reading from the JSON reader. A 'PrimitiveValue' node was expected
  • How to filter a JSON Array, with an eventListener input value at keyup
  • How to separate the different properties of filter in css?
  • Why dont work change event of bootstrap input spinner?
  • How to hide overflow text content in react
  • Is there another way to write line 6
  • Cypress - how to find by text content?
  • How to setstate for the dynamic checkboxes in a loop in react?
  • Is display:none safe?
  • How to create a form to change part of a href url of a button?
  • Put many function inside function in Javascript
  • how to exit from loop after a ajax call
  • Do Angular Reactive Form Validator.min/max check Perform Type Conversions before checking the value?
  • How to Replace Text Within Script Tags Using JQuery
  • add variable to object if not undefined using short-hand
  • How can I effectively curve my items inside a list?
  • Add new record Keyboard Shortcut on Kendo Grid Mvc
  • Time and Date running on page
  • Looping through page links puppeteer doesn't return values from the newly loaded page
  • Problem with Navigator.geoLocation.getCurrentPosition not working
  • Trying to change the id of an element with Javascript
  • Embedded Schema Inserting Blank in Meteor using Collection2
  • avoid useEffect to render at first load?
  • Why is this CSS transition only working correctly on the some clicks? How to solve it?
  • Interpolated values does not reflect the latest values in an Angular app
  • Javascript classes define attribute in constructor or outside the class
  • How to block scroll event passing through to iframe until iframe is active?
  • What is the purpose of "constructor" method in javascript?
  • Stencil JS not working with non-default imports
  • Are frameworks misleadingly named for marketing purposes?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com