javascript - 在 .replace JS 上抓取选定的文本

Question

我目前遇到一个烦人的小问题。我正在制作自己的 BBCode 编辑器，并对解析器进行编码。

现在的问题是，假设用户在文本区域中输入:

Hello my name is Michael Jones.
What is your name? 

如果用户突出显示第一个“名称”，它将编辑第一行中选定的“名称”。问题是，如果用户选择第二句中的“名称”并尝试编辑它，它将编辑第一个“名称”。

我发现，当使用 .replace 时，它会替换找到的第一个单词。所以我的问题是如何替换单词的正确匹配项？我非常不确定该怎么办! :( 这是我的代码:

function getInputSelection(item){
    if(typeof item != "undefined"){
        start = item[0].selectionStart;
        end = item[0].selectionEnd;
        return item.val().substring(start, end);
    }
    else{
        return '';
    }
}

$('button[type="button"]').click(function() {
    var textareavalue = $('#textareainput').val();
    var highlightedvalue = getInputSelection($('#textareainput'));
    var updatedvalue = '['+$(this).attr('name')+']' + highlightedvalue + '[/'+$(this).attr('name')+']';
    textareavalue = textareavalue.replace(highlightedvalue, updatedvalue);
    $('#textareainput').val(textareavalue)
});

$('button[type="button"], #textareainput').on('click keyup',function(){
    $('#posttextareadisplay').text($('#textareainput').val());
    var replacebbcode = $('#posttextareadisplay').html().replace(/(\[((\/?)(b|i|u|s|sup|sub|hr))\])/gi, '<$2>')
                                                        .replace(/(\[((align=)(left|center|right|justify))\])/gi, '<div align="$4">')
                                                        .replace(/(\[((color=#)([0-9a-fA-F]{1,}))\])/gi, '<div style="color:#$4">')
                                                        .replace(/(\[((size=)(1|2|3|4|5|6))\])/gi, '<font size="$4">')
                                                        .replace(/(\[((\/)(size))\])/gi, '</font>')
                                                        .replace(/(\[((\/)(align|color|size))\])/gi, '</div>');
    $('#posttextareadisplay').html(replacebbcode);
});

如果您想了解更多信息，或者对问题有更多了解，请发表评论! :) 谢谢，请帮忙。

Answer 1

所以，首先让我们看看您正在做什么。单击该按钮后，您:

1. 在文本区域中查找所选内容的开始索引和结束索引。
2. 使用这些索引来提取所选文本。
3. 在文本中搜索所选字符串。
4. 将第一个匹配项替换为您想要的新值。

当你这样布局时，多余的部分就会变得明显。与其将索引转换为搜索字符串然后尝试查找它...不如使用索引进行替换!这样就不会产生歧义。

其他答案是相关的:Is there a splice method for strings?

Array.prototype.slice()从数组中删除一系列项目，并且可以选择将其他内容放入其位置。这就是我们想要的。不幸的是，没有原生的String.prototype.slice()。幸运的是，实现起来很容易。在另一个答案中，他们是这样做的:

function spliceSlice(str, index, count, add) {
  return str.slice(0, index) + (add || "") + str.slice(index + count);
}

要解释这一点，请查看 the documentation for String.prototype.slice() ，这听起来几乎像 splice()，但事实并非如此。

他们以匹配 Array.slice() 的方式塑造参数，但出于您的目的，这样做会更方便:

function stringSplice(str, startIndex, endIndex, newText) {
  return str.slice(0, startIndex) + (newText|| "") + str.slice(endIndex);
}

我们在这里所做的是使用 slice() 获取所选区域之前的所有文本以及所选区域之后的所有文本，然后将替换文本粘贴在两者之间他们。

然后你会想要这样的东西:

var textareavalue = $('#textareainput').val();
var selectionStart = $('#textareainput')[0].selectionStart;
var selectionEnd = $('#textareainput')[0].selectionEnd;

textareavalue = stringSplice(textareavalue, selectionStart, selectionEnd, updatedvalue);
$('#textareainput').val(textareavalue)