Question

我目前的问题是当我像这样在css中添加一个空格。规则不会显示

＆＃13;

body{
 background-color : red;
}

＆＃13;

只有当我拥有反对的一切时才会像这样工作

＆＃13;

body{
background-color : red;
}

＆＃13;

我目前正在创建一个具有contenteditable属性的2 div。

<div class="editor-field html-field" data-name="html" contenteditable="true"></div>
<div class="editor-field css-field" data-name="css" contenteditable="true"></div>

在我的javascript中，我正在设置间隔。

setInterval(modifyEditor, 1500);

这就是我将html和css放入iframe的方式。

＆＃13;

var iframeContent = $('iframe').contents();
setIframeCss(iframeContent);
var iframeBody = iframeContent.find('body');
var iframeCss = iframeContent.find('#editorStyles');

function modifyEditor(){

  var checkHtmlText = $('.html-field').text();
  var checkCssText = $('.css-field').text();

  if(htmlText != checkHtmlText){
    htmlText = checkHtmlText;
    iframeBody.html(htmlText);
  }

  if(cssText != checkCssText){
    cssText = checkCssText;
    iframeCss.html(cssText);
  }

}

function setIframeCss(iframeContent){
  var createStyle = $('<style class= "editorStyles" id = "editorStyles"></style>');
  iframeContent.find('head').append(createStyle);
}

＆＃13;

Answer 1

在HTML中，空格已折叠。为了在各种条件下正确显示空间（如从行首开始的空格），浏览器将改为用不间断空格（字符代码160）替换常规空格（字符代码32）。这适用于HTML，但CSS不了解不间断的空间是什么。它被视为无效字符，整行或块被标记为无效（它被视为语法错误）。

我该怎么办？

关于如何替换unicode间距字符的简单查找来自StackOverflow上的这个答案，感谢@ Guffa：

https://stackoverflow.com/a/16416631/1456201

需要使用包含unicode空格字符的正则表达式添加替换方法（在您的情况下，第一个\ u00A0可以工作，但为什么不包括它们以涵盖任何可能性，因为这是用户输入的情况？）：

str.replace(/[\u00A0\u1680\u180e\u2000-\u2009\u200a\u200b\u202f\u205f\u3000]/g,'');

这是一个带有工作示例的JSFiddle：https://jsfiddle.net/jimbo2150/Lgnqabp5/1/

使用contenteditable元素和iframe

1 个答案:

我该怎么办？