Question

在我的项目中，我有一些带有文本注释的html，所以我可以在特定注释之间找到文本并替换该文本，同时留下评论，以便我可以再次进行。

我无法让正则表达式工作。

这是我正在处理的HTML行：

<td class="spaced" style="font-family: Garamond,Palatino,sans-serif;font-size: medium;padding-top: 10px;"><!--firstname-->Harrison<!--firstname--> <!--lastname-->Ford<!--lastname--> <span class="spacer"></span></td>

现在，这是我目前的javascript / jquery：

var thisval = $(this).val();  //gets replacement text from a text box
var thistoken = "firstname";

currentTemplate = $("#gentextCodeArea").text();  //fetch the text
var tokenstring = "<!--" + thistoken + "-->"
var pattern = new RegExp(tokenstring + '\\w+' + tokenstring,'i');
currentTemplate.replace(pattern, tokenstring + thisval + tokenstring);
$("#gentextCodeArea").text(currentTemplate);   //put the new text back

我认为我非常接近，但我还没有正确的权利。

正则表达式应该用$ thisval的文本框中输入的内容替换firstname（方法附加到文本框上的键盘过程）。

Answer 1

使用普通span标记而不是评论会使事情变得更容易，但不管怎样，我建议不要使用正则表达式。可能存在可能导致不良后果的边境案例。

如果你坚持使用注释标签，我会遍历子节点，然后进行替换，如下所示：

$("#fname").on("input", function () {
    var thisval = $(this).val();  //gets replacement text from a text box
    var thistoken = "firstname";

    var between = false;
    $("#gentextCodeArea").contents().each(function () {
        if (this.nodeType === 8 && this.nodeValue.trim() === thistoken) {
            if (between) return false;
            between = true;
        } else if (between) {
            this.nodeValue = thisval;
            thisval = '';
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
New first name: <input id="fname">
<div id="gentextCodeArea">
    <!--firstname-->Harrison<!--firstname--> 
    <!--lastname-->Ford<!--lastname--> 
<span class="spacer"></span></div>

您的代码出了什么问题

使用text()您无法获得评论标记。要获得这些，您需要使用html()而不是
replace()不会改变第一个参数中给出的变量，但会返回修改后的字符串。因此，您需要将其分配回currentTemplate
最好使用[^<]*代替\w+来匹配名字，因为有些名字中有非字母（连字符，空格，......），它可能会更好甚至是空的。

以下是更正后的版本，但我坚持认为正则表达式不是此类任务的最佳解决方案：

$("#fname").on("input", function () {
    var thisval = $(this).val();  //gets replacement text from a text box
    var thistoken = "firstname";

    currentTemplate = $("#gentextCodeArea").html();  //fetch the html
    var tokenstring = "<!--" + thistoken + "-->"
    var pattern = new RegExp(tokenstring + '[^<]*' + tokenstring,'i');
    currentTemplate = currentTemplate.replace(pattern, tokenstring + thisval + tokenstring);
    $("#gentextCodeArea").html(currentTemplate);   //put the new text back
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
New first name: <input id="fname">
<div id="gentextCodeArea">
    <!--firstname-->Harrison<!--firstname--> 
    <!--lastname-->Ford<!--lastname--> 
<span class="spacer"></span></div>

Answer 2

这是一个生成适当的正则表达式的函数：

function templatePattern(key) {
  return new RegExp(`<!--${key}-->(.*?)<!--${key}-->`);
}

(.*?)表示＆＃34;匹配尽可能少，＆＃34;所以它将在结束标记的第一个实例处停止。例如：

'<!--firstname-->Harrison<!--firstname--> <!--lastname-->Ford<!--lastname-->'
    .replace(templatePattern('firstname'), 'Bob')
    .replace(templatePattern('lastname'), 'Johnson')    // "Bob Johnson"

Answer 3

＆＃13;

$(function(){
  function onKeyUp(event)
  {
    if(event.which === 38)  // if key press was the up key
    {
      $('.firstname_placeholder').text($(this).val());
    }
  }
  
  $('#firstname_input').keyup(onKeyUp);
});

＆＃13;

input[type=text]{width:200px}

＆＃13;

<input id='firstname_input' type='text' placeholder='type in a name then press the up key'/>
<table>
  <tr>
    <td ><span class='firstname_placeholder'>Harrison</span> <span class='lastname_placeholder'>Ford</span> <span class="spacer"></span></td>
  </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

将HTML Comment替换为字符串变量

3 个答案:

您的代码出了什么问题