我想创建一个文本编辑器，它在文本中使用诸如 :strong: 之类的问题来确定格式。我有以下代码:
<?php
$document = $_GET["document"];
$user = $_GET["user"];
if ($user != nil) {
$pass = $_GET["pass"];
}
$pass = $_GET["pass"];
//$conn = mysqli_connect("localhost", "levimeredith", "levimorganx2");
?>
<html>
<head>
<title>Text Editor</title>
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300italic,300,100italic,100,700,700italic,400italic,500,500italic|Kalam:400,700,300' rel='stylesheet' type='text/css'>
<link href="universal.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<script>
function titleFocus() {
$(".title").css("border", "1px solid #666666");
}
function titleBlur() {
$(".title").css("border", "none");
}
$('.input').bind('input propertychange', function() {
var inputString = $(".input").html();
var inputArray = inputString.split(" ");
var newInputArray = {};
var onStrong = false;
for (var i=0; i < inputArray.length; i++) {
if (inputArray[i] == ":strong:") {
if (onStrong == false) {
newInputArray[newInputArray.length] = "<strong>";
onStrong = true;
} else if (onStrong == true) {
newInputArray[newInputArray.length] = "</strong>";
onStrong = false;
}
} else {
newInputArray[newInputArray.length] = inputArray[i];
}
}
var newInputString;
for (var i=0; i < newInputArray.length; i++) {
newInputString = newInputString + newInputArray[i];
if (i != newInputArray.length - 1) {
newInputString = newInputString + " ";
}
}
$(".input").html(newInputString);
});
$(document).ready(function() {
//Once DOM stuff is ready
});
</script>
<body>
<textarea class="title" onfocus="titleFocus()" onblur="titleBlur()">Untitled</textarea>
<div class="toolbar">
Testing
</div>
<div class="input written" contenteditable><strong>Testing </strong>Testing</div>
</body>
</html>
但是，这是行不通的。控制台根本没有显示任何错误。我哪里错了？
最佳答案
在处理(可编辑的) 时，您不应使用 。$(..).val() 而应使用 $(..).html()分区
此外，使用正则表达式可以更轻松地完成您所做的字符串操作:
$('.input').bind('input propertychange', function() {
var inputString = $(".input").html();
var newInputString= inputString.replace(
/:strong:(.*?):strong:/g, '<strong>$1</strong>');
if (newInputString !== inputString) {
console.log (newInputString);
$(".input").html(newInputString);
}
});
将您的代码移至body 标记结束后，以便在您要绑定(bind)上述事件处理程序时文档存在。为了真正安全，您甚至应该将它移到 $(function () { }); 结构中，以便在真正加载文档时附加事件处理程序。
这是一个fiddle这证明了这一点。
关于javascript - 在文本中查找格式化问题并从中创建元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33709813/