Javascript/jquery - Wrap text with tag at specific position

Content Index :

Javascript/jquery - Wrap text with tag at specific position
How to use JavaScript or jQuery to wrap the selected text into a web page in a specific tag?
How do I wrap text within a link tag using JavaScript/Jquery?
javascript to wrap specific text using regex capture but exclude html tag attributes
How to wrap sibling text of elements with tag using javascript/jquery?
Wrap text in span after string - using jquery/javascript

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 :

Tags :

Javascript/jquery - Wrap text with tag at specific position , How to use JavaScript or jQuery to wrap the selected text into a web page in a specific tag , javascript to wrap specific text using regex capture but exclude html tag attributes , How do I wrap text within a link tag using JavaScript/Jquery ,

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>

How do I wrap text within a link tag using JavaScript/Jquery?

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