JavaScript 错误 Uncaught SyntaxError: missing ) 在参数列表之后,当输入值同时包含 “ 和 ' 时

JavaScript error Uncaught SyntaxError: missing ) after argument list when input value has both " and ' in it

提问人:GThurmon 提问时间:8/26/2023 最后编辑:halferGThurmon 更新时间:9/18/2023 访问量:48

问:

我正在将数据从 DOS dBASE IV 迁移到 MySQL,并且正在使用 ColdFusion 11 构建输入表单。我的问题是,例如,我有一个名为“size”的字段,其中的值为“ 2” X 2“ X 1/4” X 10' LONG ”。

只是数千个中的一个,所以请不要建议我用 txt 替换英寸和英尺标记。

首先,我提供了一个表单,用于从表中选择要显示的字段,然后提供一个表单,用于将筛选器和搜索条件应用于所选字段,然后进行查询以获取结果。

因为我有一个字段的动态列表,所以我会循环访问它们的列表。 然后,我替换了',然后替换了',因此字段值将显示在html输入表单属性中。

一切正常,除非值中同时存在 ' 和 a。然后 JavaScript onBlur 函数在参数列表后返回错误“Uncaught SyntaxError: missing )

<!---Coldfusion code --->
<cfloop list="#fcolumnlist#" index="c"> <!---Loop over list of fields selected--->
    <td>
   <cfset thisfield = '#Evaluate('t.#c#')#'> <---Determine the value of the field--->
   <cfset thisfield = Replace(thisfield, '"', "&##34;", "ALL")> <--- replace ' --->
   <cfset thisfield = Replace(thisfield, "'", "&##39;", "ALL")> <--- replace " --->
    
    <input type="text" id="#c##t.id#" name="#c#" value='#thisfield#' 
onfocus="adjWidth(this);" onblur='ck_chg(this, "#thisfield#" )' >
         
    </td>
  </cfloop>

我的 JavaScript 函数:

function adjWidth(el)  {
        el.style.width =((el.value.length + 10) * 8) + 'px';
 }

function ck_chg(el, v) {
  if ( el.value!=v ) 
    {
        el.style.backgroundColor='#05AD05';
        el.style.color='#FFFFFF';
    } else {
        el.style.backgroundColor='';
        el.style.color='#000000';
    }
}

html 源代码如下所示,并在表单中正确显示。顺便说一句:我的表单可以返回 1 到 5,000 多条记录。

<input type="text" id="SIZE3137" name="SIZE" value='2&#34; X 2&#34; X 1/4&#34; X 10&#39; LONG' onfocus="adjWidth(this);" onblur='ck_chg(this, "2&#34; X 2&#34; X 1/4&#34; X 10&#39; LONG" )' >

我几乎尝试了所有可能的组合来替换英寸和英尺标记,但没有任何效果。我尝试过只使用更容易显示的 textarea,但我无法让样式和 JavaScript 像我想要的那样运行。顺便说一句;这个功能是因为未知列的未知宽度,它有效,丑陋但有效。adjWidth()

我怎样才能改进或至少使它发挥作用?

JavaScript 表单 双引号 ColdFusion-11 单引号

评论


答:

0赞 trincot 8/26/2023 #1

问题在于,在解析了 HTML 并解析了 HTML 实体之后,JavaScript 引擎将不得不处理代码的解析。此代码现在如下所示:onblur

ck_chg(this, "2" X 2" X 1/4" X 10' LONG" )

...在那里我们看到了问题:字符串文字在第一个“2”之后立即关闭,其余的成为语法错误。

一种快速的解决方法是依赖已具有所需字符串值的属性。所以可以这样设置:valueonblur

   <input type="text" id="#c##t.id#" name="#c#" value='#thisfield#' 
          onfocus="adjWidth(this);" 
          onblur='ck_chg(this, this.getAttribute("value") )' >

另一种可能性是转义出现在 JavaScript 字符串文本中的双引号(再次),但随后使用 JS 转义,即使用反斜杠。所以:

  <cfset thisfield = Replace(thisfield, '"', "&##34;", "ALL")> <--- replace ' --->
  <!--- add this variant: the quote is also escaped for JS --->
  <cfset thisfield2 = Replace(thisfield, '"', "\\&##34;", "ALL")> 
  <cfset thisfield = Replace(thisfield, "'", "&##39;", "ALL")> <--- replace " --->
  <input type="text" id="#c##t.id#" name="#c#" value='#thisfield#' 
         onfocus="adjWidth(this);" onblur='ck_chg(this, "#thisfield2#" )' >

还请考虑使用 EncodeForHTMLAttribute 来转义 HTML,而不是通过调用“手动”进行转义。Replace

最后,这种字符串操作使代码难以维护。尽管这将是一项艰巨的工作,但请考虑将所有 JavaScript 代码从 HTML 属性中移开,而是通过驻留在标记中的 JavaScript 代码附加事件处理程序。这被认为是更好的做法,可以减少角色逃避头痛。<script>

评论

1赞 GThurmon 8/26/2023
正如我的曾孙所说,“甜蜜”。this.getAttribute(“value”),工作得很好。非常感谢。我还用 EncodeForHTMLAttribute 替换了 cfset(s)。我读过这个,但我误解了描述,所以我甚至没有尝试。在我让ajax工作以更新MySQL表后,我计划添加事件Listeners。谢谢。