Question

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

现在问题是让用户在文本区域输入：

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

如果用户突出显示第一个＆＃39;名称，则会编辑所选的＆＃39;名称＆＃39;在第一行。问题是，如果用户选择了“＆＃39; name＆＃39;在第二句中并尝试编辑它，它将编辑第一个名称＆＃39;代替。

我发现在使用.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

所以，首先让我们来看看你在做什么。单击该按钮时，您：

在文本区域中查找选择的起始索引和结束索引。
使用这些索引提取所选文本。
在文本中搜索所选字符串。
将第一场比赛替换为您想要的新值。

当你这样铺设时，冗余部分变得明显。而不是将索引转换为搜索字符串然后尝试找到它...使用索引替换！这样，就没有歧义了。

这个其他答案是相关的：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()获取所选区域之前的所有文本，以及所选区域之后的所有文本，然后将替换文本粘贴在它们之间。< / p>

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

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

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

在.replace JS上获取所选文本

1 个答案: