Question

我的问题：我没有得到所需的输出。这就是“预期的阻碍”。

INPUT BLOCK：

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--  Comment 1 -->
<!-- <#if> Comment 2 </#if> -->

预期阻止：

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--  Comment 1 -->
<#if> Comment 2 </#if>

Codepen链接：http://codepen.io/anon/pen/vLrxvw

打开该codepen链接。
将INPUT BLOCK CODE放入文本区域。
EXPECTED BLOCK应该是输出。

仅输出更改是“取消”最后一条评论。

Answer 1

尝试使用.map()，.indexOf()，.outerHTML

function processString() {
  var txtArea = document.getElementById("txtArea"); 
  txtArea.value = "";
  var comments = $($("#txtBox").val())
  .map(function(i, el) {
    return (el.outerHTML || el.data).indexOf("<#if>") == -1 
    ? (el.outerHTML 
       || (el.nodeType === 8 ? "<--" + el.data + "-->" : el.textContent))
    : el.data
  }).get();
  txtArea.value = comments.join("")
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<textarea type="text" id="txtBox"><head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--  Comment 1 -->
<!-- <#if> Comment 2 </#if> --> </textarea>
<br /><br />
<input type="button" value="Process String" onclick="processString()" style="width:250px" />
<br /><br />
<textarea id="txtArea" rows="8" cols="30"></textarea>

Javascript onclick功能。输入块。预计阻止

1 个答案: