[英]How can I overwrite a portion of an element's text without affecting the rest of the element and any event listeners
I have this code that gets created automatically by Adoboe's RoboHelp 2017 into my HTML5 generated help file:我有这段代码由 Adoboe 的 RoboHelp 2017 自动创建到我的 HTML5 生成的帮助文件中:
<object id="MapCtrl" classid="CLSID:A8ECFBF5-08CC-4065-BD74-0FAD1EA61317" data-rhtags="1" class="" width="1" height="1">
</object>
<p style="font-family:Arial;font-size:12pt;font-weight: normal;font-style: normal;text-decoration: none;" data-rhtags="1" class="" align="left">In this Topic <a class="dropspot" href="javascript:TextPopup(this)" id="MTHotSpot46267"><span class="MTText" style="display: none;">Show</span><span class="MTText">Hide</span></a></p>
I'm trying to use javascript to dynamically modify instances of the In this Topic
我正在尝试使用 javascript 来动态修改
In this Topic
的实例text with a localized string without affecting the Show / Hide links in the anchor tags.带有本地化字符串的文本,而不影响锚标记中的显示/隐藏链接。
Here's my current attempt:这是我目前的尝试:
function localizeMiniTOC(){
const minitoc = document.querySelector('#MapCtrl + p');
const text = minitoc.textContent;
console.log (typeof text);
console.log(text.includes('In\xa0this\xa0Topic'));
if (text.includes('In\xa0this\xa0Topic') === true){
let html = minitoc.innerHTML;
linkStart = html.indexOf('<a');
remaining = html.substring(linkStart,html.length);
minitoc.innerHTML = 'En Este Tema ' + remaining;
}
}
This does change the text, but the problem I'm having, is that this also destroys the event listener that RoboHelp creates.这确实改变了文本,但我遇到的问题是,这也会破坏 RoboHelp 创建的事件侦听器。 For example, here's what the original Firefox Inspector looks like before my above code.
例如,这是原始 Firefox Inspector 在我上面的代码之前的样子。
Notice there's this event listener:注意有这个事件监听器:
Here's what it looks like after my above code above.这是我上面的代码之后的样子。
There's now no event listener:现在没有事件监听器:
I did some research today, and I understand from this link that using.innerHTML "removes internal data, like event listeners": Element innerHTML getting rid of event listeners我今天做了一些研究,我从这个链接中了解到 using.innerHTML “删除内部数据,如事件侦听器”: Element innerHTML getting rid of event listeners
But I can't seem to figure out a different way to overwrite the text before the anchor tag, yet leave the Show / Hide links and event listener unscathed.但我似乎无法想出一种不同的方法来覆盖锚标记之前的文本,而让显示/隐藏链接和事件侦听器毫发无损。
Other things I've tried:我尝试过的其他事情:
minitoc.insertAdjacentHTML('beforebegin','<p>En\xa0Este\xa0Tema\xa0' + remaining + '</p>');
(The example in the linked page shows how to do this by appending to an existing element, but I need to overwrite the text leading up to the anchor tag, not append to the element.) (链接页面中的示例显示了如何通过附加到现有元素来执行此操作,但我需要覆盖指向锚标记的文本,而不是覆盖元素的 append。)
I've tried to use.setAttribute to recreate the onclick event: minitoc.setAttribute('onClick()',TextPopup('MTHotSpot46267'));
我尝试使用 .setAttribute 重新创建 onclick 事件:
minitoc.setAttribute('onClick()',TextPopup('MTHotSpot46267'));
I've tried to recreate the event listener but that didn't work either: minitoc.addEventListener('click', TextPopup('MTHotSpot46267'));
我尝试重新创建事件侦听器,但这也不起作用:
minitoc.addEventListener('click', TextPopup('MTHotSpot46267'));
All the examples online seem to deal with appending or prepending, not overwriting text.所有在线示例似乎都处理附加或前置,而不是覆盖文本。
How can I dynamically overwrite the In this Topic
如何动态覆盖
In this Topic
text with a localized string without affecting the Show / Hide links and the event listener on those links?带有本地化字符串的文本而不影响这些链接上的显示/隐藏链接和事件侦听器?
Perhaps there's not a way to overwrite the text without nuking the event handler, but I did manage to fix my code so that it now at least adds the event handler back on after the minitoc.innerHTML = 'En Este Tema ' + remaining;
也许没有办法在不破坏事件处理程序的情况下覆盖文本,但我确实设法修复了我的代码,以便它现在至少在
minitoc.innerHTML = 'En Este Tema ' + remaining;
line rewrites my paragraph.行重写了我的段落。
Here's my updated function:这是我更新的 function:
function localizeMiniTOC(){
const minitoc = document.querySelector('#MapCtrl + p');
const anchor = document.querySelector('#MapCtrl + p > a');
const text = minitoc.textContent;
if (text.includes('In\xa0this\xa0Topic') === true){
let html = minitoc.innerHTML;
linkStart = html.indexOf('<a');
remaining = html.substring(linkStart,html.length);
if (anchor.id.includes('MTHotSpot') === true){
minitoc.innerHTML = 'En Este Tema ' + remaining;
minitoc.addEventListener('click', function(e){
if (e.target.tagName === 'SPAN' && e.target.className==="MTText"){
TextPopup(anchor.id);
}
});
}
}
}
Notice that I had an error in my original attempted workaround to add the event listener back in. In this incorrect code, I had neglected to call the function properly in the second parameter:请注意,我在最初尝试的解决方法中出现了错误以重新添加事件侦听器。在这个不正确的代码中,我忽略了在第二个参数中正确调用 function:
minitoc.addEventListener('click', TextPopup('MTHotSpot46267'));
Here's the fixed code for that (taken from my updated function):这是固定代码(取自我更新的函数):
minitoc.addEventListener('click', function(e){
if (e.target.tagName === 'SPAN' && e.target.className==="MTText"){
TextPopup(anchor.id);
}
This results in the event listener getting added to the paragraph and then it was just a matter of making sure I was clicking on the span tag before running the TextPopup function.这导致事件侦听器被添加到段落中,然后只需确保在运行 TextPopup function 之前单击 span 标签即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.