[英]Getting a HTML element DOM as string using javascript without child elements
[英]Pure JavaScript - edit text in DOM element without touching child elements
我目前正在尝试编辑单个父元素的所有子元素的文本。 该结构类似于以下内容:
<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 <3 me?</p>
<p id=ea5>:-):-):-)<3<3<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,但我不想将其用于该特定问题。
我如何编辑我的pageEmojify函数来做到这一点?
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 <3 me?</p> <p id='ea5'>:-):-):-)<3<3<3</p> </section>
检查节点的nodeValue
以获得给定元素的值。 如果还有其他节点,则遍历该数组以获取所有其他节点的内容。
如果您检入页面的属性(在chrome dev工具中,转到元素,单击一个元素,然后查看右侧的属性),则可以看到每个页面中都有一个“文本”节点
元素。 如果是
元素whoc中有span,它将显示其中包含3个元素-文本,span和一个文本。 您可以修改其功能以仅处理其中的文本节点。 就像
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函数专家。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.