0

我现在花了几天时间尝试在 javascript 中调试一个简单的替换，这让我发疯。将不胜感激任何帮助。

当我在标题中创建一个带有 javascript 函数的简单 html 文件并在正文中调用函数时，我可以获取元素的内容并使用替换方法替换 innerHTML 的某些字符，例如换行符。我也可以用 jsfiddle 做到这一点。

toedit = toedit.replace(/\n/g, '<br />');

但是，在我想使用它的实际应用程序中，脚本位于页面的标题中，而 html 通过一些 ajax 放置在页面上的 div 中，它失败了。谁能发现问题？

以下适用于 HTML 页面或 JSFiddle

<html>
    <head>
    <script type="text/javascript">
    function editText(editThis)
      {
    alert(editThis);
    //alert("hi");
    var toedit = document.getElementById(editThis).innerHTML;
 //       alert(toedit);
    toedit = toedit.replace(/\n/g, '<br />');
    alert(toedit);
      }
    </script>
    </head>
    <body>
    <textarea id="text" name="text" rows=9 cols=30 placeholder="Type Notes">A whole bunch
     of text with
     line breaks goes here</textarea><a href="#" onclick="editText('text');return false;">edit</a>
    </body>
    </html>

以下脚本不会在 id 旁边有 * 的行中运行。是否适用于删除该行。仅注释掉行时脚本中断。

在页眉中：

 <script type="text/javascript">
    function editText(editThis)
      {
         alert(editThis);
         //alert("hi");
         var toedit = document.getElementById(editThis).innerHTML;
         alert(toedit);
         toedit = toedit.replace(/\n/g, '<br />'); //****problem line
         alert(toedit);
      }
    </script>

//从页面调用的以下函数，用包含指向上述js的链接的html填充div

function loadSteps(id) 
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("stepsDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getsteps.php?id="+id,true);
xmlhttp.send();
} //end function

从上面的js函数调用getsteps.php

echo '<textarea id="text" rows=9 cols=30 placeholder="Type text">'.$text.'</textarea><a href="#" onclick="editText(\'text\');return false">edit</a>
4

2 回答 2

0

您的问题在于以下行：

var toedit = document.getElementById(editThis).innerHTML;

您正在抓取 DOM 对象的 innerHTML，即 id 为“text”的文本区域。此对象的 innerHTML 尚未更新。相反，您需要的是文本区域的值，它将为您提供在文本区域中键入的实际文本。将上述行更改为以下内容：

var toedit = document.getElementById(editThis).value;

那应该可以解决您的问题！快乐编码！

于 2012-12-28T03:22:48.037 回答
0

您正在设置一个变量，它是 innerHTML 的副本，您需要直接更新 innerHTML

  document.getElementById(editThis).innerHTML=toedit;//once you've done your replace

但是为什么在进行
替换之前在 onreadystatechange 中设置 innerHTML(/\n/g, '
')

一旦它在 HTML 中，它可能不会保留换行符。

.responseText.replace(/\n/g, '<br />')

或者

.responseText.replace(/\r\n/g, '<br />')
于 2012-12-28T03:05:13.890 回答