gpt4 book ai didi

javascript - 在选择周围嵌入 HTML,无需 jQuery

转载 作者:行者123 更新时间:2023-12-03 03:05:16 26 4
gpt4 key购买 nike

这一定是一个相当简单的问题,但我只需要一种简洁的方法来在给定的文本选择周围嵌入 HTML(想想:文本编辑器),而无需 jQuery。

下面的代码在嵌入 HTML 的情况下工作正常,但它作为字符串执行,这显然是一个问题。

replace 方法的另一个问题是它只会替换第一个实例,如果用户选择了单个字符或字母和单词的常见组合,这将导致问题。

    const userInput = document.getElementById('user-input'),
embolden = document.getElementById('controls-embolden')
let sel

userInput.onmouseup = function(){
if (window.getSelection) {
sel = window.getSelection().toString()
embolden.onclick = function(){
const txt = userInput.innerHTML
const newTxt = txt.replace(sel, '[b]'+sel+'[/b]')
userInput.innerHTML = newTxt
}
}
}

我尝试使用createRange,但这不起作用,部分原因在于我布置 HTML 的方式。

    <body>
<div id="controls">
<div class="controls" id="controls-embolden">Embolden</div>
</div>
<div id="user-input" contenteditable="true">
# random text from an article on medium
By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with. Not only is the photo itself problematic, but also the fact that ReactiveConf never asked for my consent. I was never informed that ReactiveConf was planning on altering my photo for the event, nor did I see the superhero picture until after day one of the conference had ended. None of the organizers explicitly asked for my permission to display the picture on the big screen. Had I presented my talk on day 1, I would have been completely blindsided as I walked on stage, which is what happened to a colleague of mine who was also unhappy with his picture. Speaking at a conference is already a monumental investment of mental, emotional, and physical effort, right up until the plane ride home. The will to continue investing any more energy into an event whose organizers had showed so little consideration for their speakers vanished as soon as I received the gift. After consulting with trusted members of my team, I decided to withdraw and leave the situation immediately. By portraying me in a sexual way to attendees, this would have opened the door to additional harassment, and added yet another hurdle I’d have to overcome in order to be perceived as a competent professional. The fact that nowhere along the way did ReactiveConf organizers recognize how this gift could actually be harmful, to me, demonstrated a complete lack of empathy for women in tech. That’s not an organization I want to associate myself or my employer, Meteor Development Group (MDG), with.
</div>
</body>

我一直在寻找想法。如何实现这一目标?有什么想法吗?

最佳答案

安东尼,我想您需要在尝试应用粗体标记时使用尖括号而不是方括号。

即代替

const newTxt = txt.replace(sel, '[b]'+sel+'[/b]')

使用

const newTxt = txt.replace(sel, '<b>'+sel+'</b>')

关于javascript - 在选择周围嵌入 HTML,无需 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47192679/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com