Question

我有一个HTML字符串，我想替换包含替换文本类

的所有span

var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span>Hello<span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span>Other string charatcter';

预期输出为：

{{58d4aa82c887136a08dbedf5}}Hello{{58d4aa82c887136a08dbedf4}}Other string charatcter

意思是：

{{span_id}}middle string{{span_id}}

Answer 1

根据我的理解，您希望为span元素指定innerText属性的id。

你走了：

var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span> Hello <span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span> Other string charatcter';

$('#container').html(html);

$('.replace_text').each(function() {
  // We iterate over all such elements

  $(this).text('{{' + $(this).attr('id') + '}}'); // We get vaue in the id attribute and add it to the span

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='container'></div>

当你用jQuery标记答案时，我已经使用相同的

给出了我的解决方案

Answer 2

您可以创建一个元素，将.innerHTML设置为html，使用.find() $.map()来迭代span元素，返回span {{ 1}}和.id .nextSibling，在结果数组上使用参数.textContent调用.join()以从数组创建字符串。

＆＃13;

""

＆＃13;

var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span>Hello<span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span>Other string charatcter';

var res = $.map($("<div>", {html:html}).find("span"), function(el) {
            return "{{" + el.id + "}}" + el.nextSibling.textContent 
          }).join("");

$("body").append(res);

＆＃13;

Answer 3

我建议创建一个虚拟元素并使用DOM api。解析/修改HTML字符串的任何正则表达式解决方案都是垃圾。

const prepareHtml = html => {
  var fragment = document.createElement('div')
  fragment.innerHTML = html
  for (let span of fragment.querySelectorAll('span.replace_text'))
    span.innerHTML = `{{${span.id}}}`
  return fragment.innerText
}

var html = '<span class="replace_text" id="58d4aa82c887136a08dbedf5" contenteditable="false">mcq</span>Hello<span class="replace_text" id="58d4aa82c887136a08dbedf4" contenteditable="false">mcq</span>Other string charatcter'

console.log(prepareHtml(html))
// {{58d4aa82c887136a08dbedf5}}Hello{{58d4aa82c887136a08dbedf4}}Other string charatcter

Javascript字符串替换所有范围

3 个答案: