Fatal编程技术网
  • javascript/
  • Javascript 计算拼写错误的单词数

Javascript 计算拼写错误的单词数

javascript jquery

Javascript 计算拼写错误的单词数,javascript,jquery,tinymce-4,Javascript,Jquery,Tinymce 4,我有一个项目，我需要计算一个文本区域中拼写错误的单词数量，如果有太多拼写错误，就阻止提交web表单。JavaScript编辑器tinyMCE用于输入表单。PHP脚本spellcheckText.PHP统计拼写错误（如果有），并将JSON编码的结果返回给浏览器。代码示例如下： <html lang="en"> <head> <meta charset="UTF-8"> <tit

我有一个项目，我需要计算一个文本区域中拼写错误的单词数量，如果有太多拼写错误，就阻止提交web表单。JavaScript编辑器tinyMCE用于输入表单。PHP脚本spellcheckText.PHP统计拼写错误（如果有），并将JSON编码的结果返回给浏览器。代码示例如下：

<html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" src="/simages/css/bootstrap/3.3.7/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="/simages/scripts/js/tinymce/js/tinymce/tinymce.min.js"></script> <script> tinymce.init({ selector: ".standard-editor", plugins: "wordcount spellchecker", paste_as_text: false, theme: "modern", branding: false, content_style: ".mce-content-body {font-size:16px;font-family:Arial,sans-serif;}", browser_spellcheck: true, toolbar: "undo redo", spellchecker_rpc_url: '/simages/spellchecker/spellchecker.php', menubar: "tools", statusbar: true, height: "400", width: "600", paste_data_images: false, paste_enable_default_filters: false, paste_preprocess: function(plugin, args) { args.content = ''; } }); </script> <script type="text/javascript"> function checkWordCount() { var wordCount = tinyMCE.activeEditor.plugins["wordcount"].getCount(); if (wordCount < 50) { alert("Need 50 words or greater for your text submission..."); return false; } var essayContent = tinyMCE.activeEditor.getContent({format: 'text'}); function getSpellCount(essayContent){ return new Promise((resolve,reject) => { jQuery(function(\$) { var values = { 'str': essayContent }; \$.ajax({ type: "POST", url: "/path/to/spellcheckEssay.php", data: values, success: resolve, error: reject, }) }); }) } var percentage = getSpellCount(essayContent); percentage.then(function(result){ console.log(result); var grade = result.percentage; if(grade < 80){ alert("Please edit your response."); return false; }else{ document.essayform.submit(); } }).catch(function (error) { console.log('Failed',error); }); } </script> </head> <body> <div class="container-fluid"> <div class="form-group"> <form method=POST action="/path/to/ajax/textWords.php" name="essayform" id="essayQuestion" onsubmit="event.preventDefault();checkWordCount();"> <h3>$thesequestions{'Text'}</h3> <p> <textarea name="textarea" class="standard-editor" id="essay"></textarea> </p> <br/> <input class="btn btn-primary" type="submit" value="Submit Text"/> </form> </div> </div> </body> </html>``` I don't do front end coding that often, so don't know if the attempt to post twice in the same form is the problem or something else. Results of this example is a blank page where form's post action is executed. Don't believe that jQuery section is executed. Open to suggestions for a better method. Thank you. **Below is a revision of the original code post**: ```<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <link rel="stylesheet" src="/css/bootstrap/3.3.7/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="/scripts/js/tinymce/js/tinymce/tinymce.min.js"></script> <script> tinymce.init({ selector: ".standard-editor", plugins: "wordcount spellchecker", paste_as_text: false, theme: "modern", branding: false, content_style: ".mce-content-body {font-size:16px;font-family:Arial,sans-serif;}", browser_spellcheck: true, toolbar: "undo redo", spellchecker_rpc_url: '/simages/spellchecker/spellchecker.php', menubar: "tools", statusbar: true, height: "400", width: "600", paste_data_images: false, paste_enable_default_filters: false, paste_preprocess: function(plugin, args) { args.content = ''; } }); </script> <script type="text/javascript"> function checkWordCount() { var wordCount = tinyMCE.activeEditor.plugins["wordcount"].getCount(); if (wordCount < 50) { alert("Need 50 words or greater for your text submission..."); return false; } var essayContent = tinyMCE.activeEditor.getContent({format: 'text'}); function getSpellCount(essayContent){ return new Promise((resolve,reject) => { jQuery(function($) { var values = { 'str': essayContent }; console.log(values); $.ajax({ type: "POST", url: "/path/to/ajax/spellcheckText.php", data: values, success: resolve, error: reject, }) }); }) } var percentage = getSpellCount(essayContent); percentage.then(function(result){ console.log(result); var grade = result.percentage; if(grade < 80){ alert("A number of misspelled words were detected. Please correct and submit again."); return false; } }).catch(function (error) { console.log('Failed',error); }); } </script> </head> <body> <div class="container-fluid"> <div class="form-group"> <form method=POST action="/path/to/ajax/textWords.php" name="essayform" id="essayQuestion" onsubmit="event.preventDefault();checkWordCount();"> <h3>$thesequestions{'Text'}</h3> <p> <textarea name="textarea" class="standard-editor" id="essay"></textarea> </p> <br/> <input class="btn btn-primary" type="submit" value="Submit Text"/> </form> </div> </div> </body> </html>``` 试验 tinymce.init({ 选择器：“.标准编辑器”， 插件：“wordcount拼写检查器”， 粘贴为文本：false， 主题：“现代”， 品牌：错， 内容样式：“.mce内容正文{字体大小：16px；字体系列：Arial，无衬线；}”， 浏览器拼写检查：true， 工具栏：“撤消重做”， 拼写检查器_rpc_url:'/simages/spellchecker/spellchecker.php'， 菜单栏：“工具”， 状态栏：对， 高度：“400”， 宽度：“600”， 粘贴数据图像：false， 粘贴\启用\默认\过滤器：false， 粘贴预处理：函数（插件、参数）{ args.content=''； } }); 函数checkWordCount（）{ var wordCount=tinyMCE.activeEditor.plugins[“wordCount”].getCount（）； 如果（字数<50）{ 提醒（“提交文本需要50字或以上…”）； 返回false； } var-essayContent=tinyMCE.activeEditor.getContent（{format:'text'}）； 函数getSpellCount（essayContent）{ 返回新承诺（（解决、拒绝）=>{ jQuery（函数（\$）{ var值={'str'：essayContent}； \$.ajax({ 类型：“POST”， url:“/path/to/spellcheckthose.php”， 数据：价值观， 成功：决心， 错误：拒绝， }) }); }) } var百分比=getSpellCount（essayContent）； 百分比。然后（函数（结果）{ 控制台日志（结果）； var等级=结果百分比； 如果（等级<80）{ 提醒（“请编辑您的回复”）； 返回false； }否则{ document.essayform.submit（）； } }).catch（函数（错误）{ console.log（'Failed'，error）； }); } $TESS问题{'Text'}


``` 我不经常做前端编码，所以不知道尝试以相同的形式发布两次是问题还是其他原因。本例的结果是一个空白页，其中执行表单的post操作。不要相信jQuery部分已经执行。 接受更好方法的建议。 非常感谢。 **以下是原始代码帖子**的修订版： ``` 试验 tinymce.init({ 选择器：“.标准编辑器”， 插件：“wordcount拼写检查器”， 粘贴为文本：false， 主题：“现代”， 品牌：错， 内容样式：“.mce内容正文{字体大小：16px；字体系列：Arial，无衬线；}”， 浏览器拼写检查：true， 工具栏：“撤消重做”， 拼写检查器_rpc_url:'/simages/spellchecker/spellchecker.php'， 菜单栏：“工具”， 状态栏：对， 高度：“400”， 宽度：“600”， 粘贴数据图像：false， 粘贴\启用\默认\过滤器：false， 粘贴预处理：函数（插件、参数）{ args.content=''； } }); 函数checkWordCount（）{ var wordCount=tinyMCE.activeEditor.plugins[“wordCount”].getCount（）； 如果（字数<50）{ 提醒（“提交文本需要50字或以上…”）； 返回false； } var-essayContent=tinyMCE.activeEditor.getContent（{format:'text'}）； 函数getSpellCount（essayContent）{ 返回新承诺（（解决、拒绝）=>{ jQuery（函数（$）{ var值={'str'：essayContent}； console.log（值）； $.ajax({ 类型：“POST”， url:“/path/to/ajax/spellcheckText.php”， 数据：价值观， 成功：决心， 错误：拒绝， }) }); }) } var百分比=getSpellCount（essayContent）； 百分比。然后（函数（结果）{ 控制台日志（结果）； var等级=结果百分比； 如果（等级<80）{ 警报（“检测到大量拼写错误的单词。请更正并重新提交。”）； 返回false； } }).catch（函数（错误）{ console.log（'Failed'，error）； 
```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" src="/simages/css/bootstrap/3.3.7/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/scripts/js/tinymce/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: ".standard-editor",
            plugins: "wordcount spellchecker",
            paste_as_text: false,
            theme: "modern",
            branding: false,
            content_style: ".mce-content-body {font-size:16px;font-family:Arial,sans-serif;}",
            browser_spellcheck: true,
            toolbar: "undo redo",
            spellchecker_rpc_url: '/path/to/spellchecker/spellchecker.php',
            menubar: "tools",
            statusbar: true,
            height: "400",
            width: "600",
            paste_data_images: false,
            paste_enable_default_filters: false,
            paste_preprocess: function(plugin, args) {
                args.content = '';
            }

        });
    </script>
    <script type="text/javascript">
        function checkWordCount() {
            var wordCount = tinyMCE.activeEditor.plugins["wordcount"].getCount();
            if (wordCount < 50) {
                alert("Need 50 words or greater for your text submission...");
                return false;
            }
            var essayContent = tinyMCE.activeEditor.getContent({format: 'text'});
            function getSpellCount(essayContent){
                return new Promise((resolve,reject) => {
                    jQuery(function($) {
                        var values = { 'str': essayContent };
                        console.log(values);
                        $.ajax({
                            type: "POST",
                            url: "/path/to/ajax/spellcheckText.php",
                            data: values,
                            success: resolve,
                            error: reject,
                        })
                    });
                })
            }
            var percentage = getSpellCount(essayContent);
            percentage.then(function(result){
                console.log(result);
                var grade = result.percentage;
                if(grade < 80){
                    alert("A number of misspelled words were detected. Please correct and submit again.");
                    return false;
                }
            }).catch(function (error) {
                console.log('Failed',error);
            });
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="form-group">
        <form method=POST action="/path/to/ajax/textWords.php" name="essayform" id="essayQuestion" onsubmit="event.preventDefault();checkWordCount();">
            <h3>$thesequestions{'text'}</h3>
            <p>
                <textarea name="textarea" class="standard-editor" id="essay"></textarea>
            </p>
            <br/>
            <input class="btn btn-primary" type="submit" value="Submit Text"/>
        </form>
    </div>
</div>
</body>
</html>```