"运行时jQuery上的字符串中的粗体特定文本"

Question

我的要求是：这是一个输入字段。 当用户要填充它时，在运行时我搜索#tag 并使文本变为粗体。 并希望将两组#tags分开

例如： “我更喜欢#FromSide #FromSide并且想与更多的人交谈#ToSide ” Group1： #FromSide #FromSide Group2： #ToSide

这是我的代码：

 `$('#custm-field').keyup(function(){`
            `let str = $(this).val();`
            `let arr = str.split(" ");`
            `$(arr).each((i,e)=>{`
                `if(e=="#")`
                `{ // $(e).css('font-weight','bold');`
                    `arr[i].replace(e,"<strong>"+e+"</strong>");}
                    `let newStr = arr.join(" ");`
            `$('#custm-field').val(newStr)`
            `});`

Answer 1

这可以使用 RegEx 来实现：

 $('#custm-field').keyup(function(){ let str = $(this).val(); str = str.replace(/#(.+?)\\s/, '<strong>$1</strong>'); $('#custm-field').val(str); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="custm-field"></input>

但是，粗体效果不会显示在输入字段中，您需要一个contenteditable 元素。

Answer 2

我已经为你构建了一个解决方案，

首先，您不能在输入标记的值内添加 HTML 标记。 因此，您必须使用contenteditable<\/code> HTML 属性，通过在任何元素上将其设置为 true contenteditable="true"<\/code> ，您就可以开始编辑它的内容（在其中写入）。

注意：<\/strong>我添加了背景颜色以使其在空时可见

你的 JavaScript (JQuery) 看起来像这样：
  
       
 
        请注意，您的代码有许多我必须修复的错误。
 
        
 
        
我使用了这个答案<\/a>的代码，这就是这一行cursorManager.setEndOfContenteditable(e);<\/code> 来自。 为了方便起见，这是他们的代码。
希望这能像你想要的那样工作。
"