Javascript/jquery - 在特定位置用标签包装文本

Question

我有一些文字:

<p>hello world. This is a test paragraph.</p>

我想添加一个 <em>在起始位置标记和 </em>在结束位置给我们:

<p>
  <em>hello</em> world. This is a <em>test</em> 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>

有没有简单的方法来做到这一点？

这是我的做法(对答案略作修改):

var p = doc+=" "//document.querySelector("#content"),//I added a space to the end of the document because if we try to wrap the em tags around the word we are looking for and it is at the end of the document then it gives us undefined.
    textArray = p.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];
});

document.querySelector("#content").innerHTML += textArray.join('');
document.querySelector("#content").innerHTML += "<hr>";

Answer 1

这是一个不需要 jQuery 的简单示例。

Example Here

从对象的offset 数组开始，以确定start/end 值。

[
  { start: 0, end: 5 },
  { start: 22, end: 27 }
]

然后遍历 offset 数组:

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>

---

如果您想解析列表元素以创建 offset 数组:

Example Here

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>