Question

我目前正在尝试编辑单个父元素的所有子元素的文本。结构类似于：

<section id=emoji>
        <h1>Emojies</h1>
        <p id=ea1>:-)</p>
        <p id=ea2>(TM)</p>
        <p id=ea3>Trademark(TM) <span>:-</span>)</p>
        <p id=ea4>Do you &lt;3 me?</p>
        <p id=ea5>:-):-):-)&lt;3&lt;3&lt;3</p>
</section>

如您所见，第三段标记具有 span 标记。我有一个函数，它将获取给定的字符串，并将表情符号的所有实例转换为 emojify 函数中的指定表情符号。我想对部分中的这些元素动态地执行相同的操作。问题是我不想编辑 span ，并且在那一刻，加入 span 标签会产生一个笑脸，我不会这样做。我想做。

我的表情符号功能如下所示：

function emojify(str) {
    let emojies = [];
    emojies['(TM)'] = '™️';
    emojies['<3'] = '❤️';
    emojies[':-)'] = '';

    emojies.forEach(function(el) {
        if (str.indexOf(el) > -1) {
            str = str.split(el).join(emojies[el]);
        }
    });

    return str;
}

这是我当前尝试动态执行此操作的功能：

function pageEmojify(selector) {
    let element = document.querySelector(selector);
    element.childNodes.forEach(function(el) {
        el.textContent = emojify(el.textContent);
    });
}

它有效，我只需要在任何转换中都不包含 span 标记。

我已经在StackOverflow上查看了各种问题，但是所有人似乎都使用了jQuery，我不想用它来解决这个问题。

例如：How to only change the text in a DOM element without replacing any child elements

如何编辑 pageEmojify 功能来执行此操作？

Answer 1

function emojify(str) {
  let emojies = [];
  emojies['(TM)'] = '™️';
  emojies['<3'] = '❤️';
  emojies[':-)'] = '';

  for (let el of Object.keys(emojies)) {
    if (str && str.indexOf(el) > -1) {
      str = str.split(el).join(emojies[el]);
    }
  }
  return str;
}

function pageEmojify(selector) {
  let element = document.querySelector(selector);
  element.childNodes.forEach(function(el) {
    if (el.childNodes) {
      el.childNodes.forEach(function(elm) {
        elm.nodeValue = emojify(elm.nodeValue)
      })
    } else el.textContent = emojify(el.textContent);
  });
}
pageEmojify('section');

<section id='emoji'>
        <h1>Emojies</h1>
        <p id='ea1'>:-)</p>
        <p id='ea2'>(TM)</p>
        <p id='ea3'>Trademark(TM) <span>:-</span>)<span>:-</span>)</p>
        <p id='ea4'>Do you &lt;3 me?</p>
        <p id='ea5'>:-):-):-)&lt;3&lt;3&lt;3</p>
</section>

检查节点的nodeValue以获取给定元素的值。如果有任何其他节点循环通过该数组以获取所有其他节点内容。

Answer 2

如果您签入页面的属性（在chrome dev工具中，转到元素，单击元素并转到右侧查看属性），您可以看到每个属性中都有一个“文本”节点你的

元素。如果

元素中包含跨度，则会显示其中有3个元素 - 文本，范围和文本。你可以修改你的功能，只处理其中的文本节点。这就像

function pageEmojify(selector) {
    let element = document.querySelector(selector);
    element.childNodes.forEach(function(el) {
        ## get child nodes of e
        ## if teh childnode is of type text, then get innertext and pass it to emojify  
    });
}

我在这里给出伪代码，因为我不是js函数的专家。

纯JavaScript - 在DOM元素中编辑文本而不触及子元素

2 个答案: