Question

我需要从<div>中提取大量文本，通过JavaScript的.innerHTML将其放入字符串中，然后通过.split("")进行拆分。从这里，我需要获取插入符号的位置（我正在使用的位置），然后在此处插入新标签。

var newtext = $('outputcontent').innerHTML.split("");
    var wheretoinsert = getCaretPos($('outputcontent'));
    newtext[wheretoinsert] += "<div>Content goes here</div>";
    $('outputcontent').innerHTML = "";
    for(var i = 0; i < newtext.length; i++){
        $('outputcontent').innerHTML += newtext[i];
    }

我目前正在通过重置<div>的内容，然后在for语句中添加每个拆分部分来做到这一点。我遇到的问题是，除了div与新内容保持不变之外，它会更改为在文本中可见每个html标签，例如：

RE; Incorporation and Organization

作为一行文本将被重写为：

 <div class="leftAlign"> <b> <u> RE; Incorporation and Organization </u> </b>...

我将如何更改它，以使html标记将保持作为标记的功能，而不会转义到字符串中？请注意，我不正在使用jQuery或任何其他插件，并且不能这样做。

Answer 1

^{（我假设$是一个返回Element的函数。）}

Element.innerHTML不仅仅是一个字符串；它正在幕后进行工作。设置时，整个字符串将解析为DocumentFragment，用于替换Element的内容。当您逐个字符地构建它时，Element.innerHTML只会看到一个"<"，它会忠实地转换为"<"：

const div = document.querySelector('div');
console.log('Original content:', div.innerHTML);

const newContent = '<hr>'.split('');
for (let i = 0; i < newContent.length; ++i) {
  div.innerHTML += newContent[i];
  console.log(`After inserting character ${i}: ${div.innerHTML}`);
}

<div><em>Original is fine</em></div>

join并没有遍历您的newtext数组，而是将其返回到字符串，然后再将其发送到innerHTML：

const div = document.querySelector('div');
console.log('Original content:', div.innerHTML);

const newContent = '<hr>'.split('');
div.innerHTML = newContent.join('');
console.log('After replacing with newContent:', div.innerHTML);

<div><em>Original is fine</em></div>

将<div>内容发送到字符串，对其进行编辑，然后替换

1 个答案: