CKeditor does not accept special characters or diacritics in keywords

Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English characters like öäåÖÄÅ and Diacritics such as léjonet with é or ñ not being passed through some sort of filter.

Below is the HTML code along with a functioning Jsfiddle demo:

<!-- Textarea -->
<div class="form-group">
<label class="col-md-2 control-label" for="editor1">HTML </label>
<div class="col-md-10">                     
<textarea class="form-control" id="editor1" name="editor1"><p>text example with ahöäåra</p></textarea>
</div>
</div>

// More code snippets...

Additionally, JavaScript code has been included to address the diacritics removal function. If you encounter any issues related to this function affecting characters like öäåñ, the solution may lie in modifying or removing this specific function entirely.

If you would like to explore the full code and experiment with the functionality, feel free to check out the demonstration on JSFiddle:

DEMO

javascripthtmljquerycssckeditor

Answer №1

This particular line of code 

TextGrab.replace(/[^a-zA-Z ]+/g, "").trim()
serves the purpose of eliminating everything except characters from a to z, both in lower and upper case, as well as blank spaces. Any Unicode characters will be removed as a result. Therefore, it is advisable to either delete or comment out this specific line from the code.

On the other hand, the following line of code 

srctext.toLowerCase().split(/\W+/)
segments anything that does not fall within the range of a to z or 0 to 9. This means that the word ahöäåra would be split into ah and ra. Hence, consider replacing it with 
srctext.toLowerCase().split(/[^\p{L}\p{M}\p{N}]+/u)
.

Lastly, to remove the function referred to as removeDiacritics(), simply exclude it from your code altogether.

... (remaining content unchanged)

Due to iframe permission constraints on Stack Overflow, the aforementioned code may not run correctly here. For a functional demonstration, kindly refer to its performance on jsFiddle instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to modify the text color in a CSS animation without using any external libraries?

When using this pure CSS loading animation, the fore color is set to white which may not be visible on a white background. How can the fore-color be changed? .lds-hourglass { display: inline-block; position: relative; width: 120px; height: 120 ...

css

{ 'Name:UniqueRewrite': { token: 738561, number: 2021.8 } }

Is there a way to extract the token value from this data in Node.js? console.log({'Name:Test': { token: 738561, number: 2021.8 } }) I need to isolate just the token and store it in another variable. ...

javascriptnode.js

Updating a particular element within nested arrays: best practices

I have developed a data table containing student records using material UI. Each row represents a different student array with a fee verification button. My goal is to change the fee status when the button is clicked for a specific student, but currently t ...

javascriptarraysreactjs

What is the best way to execute a function before showing an alert in a $.post() callback?

Just to clarify, the code I'm working with is not original to me; I am simply making some interface adjustments using a plugin for an existing system. The task at hand involves creating a plugin that utilizes blockUI (yes, a plugin within a plugin) t ...

javascriptjqueryajaxblockui

A different way to center elements using CSS

Many criticize the center tag, but I find that it consistently aligns things perfectly for me. Despite its deprecation, I still rely on it. I've come across suggestions to use the mysterious CSS margin: 0 auto;, but I struggle to make it work (refer ...

centercss

Attaching a $UI element to a <div> tag with JQuery may result in unexpected errors and issues

Attempting to connect SagePayments card elements to the paymentDiv. Followed their sample project for guidance, but encountering issues with populating the elements when running the program with a custom Sandbox merchantID and merchantKey. Chrome's de ...

javascriptc#jqueryhtmlopayo

Mixing percentage width with a fixed minimum width in CSS results in divs failing to align in a single line

Having an issue with the responsiveness of a website layout that includes three columns (let's say 'A', 'B', and 'C') each 96% high, along with a footer. Columns A and C have a width of 35%, while column B is set to be 30 ...

htmlcssresponsive

Webpack Error: SyntaxError - an unexpected token found =>

After transferring my project to a new machine, I encountered an error when running webpack --watch: C:\Users\joe_coolish\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:186 outputOption ...

javascriptnpmwebpack

What is the best way to activate the slide stop event handler?

After attempting to use the slidestop handler as shown here, I encountered issues. Here is the code snippet: $("#tempslider").on("slidestop", function(e){ alert($("#tempslider").val()); }); Fortunately, I came across this post which provided a soluti ...

jqueryjquery-mobile

Stop users from saving the page in Next.js

I'm currently working on a NextJs project that involves building an editor application. I want to ensure that the editor functionality does not work when users attempt to save the page in a different format, similar to how applications like Youtube an ...

javascriptnext.jsserverclient

Alignment issue detected

I was attempting to center these 4 divs inside a container both horizontally and vertically, but they are stuck at the top edge of the <div>. They aren't moving down and remain fixed at the top. /* Footer */ #footer { width: 100%; hei ...

htmlcss

Retrieve the content from the body and insert it into a description text box on a freshly created page with the help of JQuery

On my discussion list page, I have a button that redirects me to a create project form. I am looking for a way to automatically transfer the body content (original poster's post) from the discussion list page to the description box on the form using J ...

jqueryformsgetforum

The way an event can be outrun or vanish due to another event

let bar = new function(){ $scope.MessageSpan="Item added successfully";} When the Add button is clicked, the above function is invoked. However, if I want to hide this message when any other button is clicked, I would have to update the span text for all ...

javascriptangularjs

Utilizing an npm Package in Laravel - Dealing with ReferenceError

I'm having trouble with the installation and usage of a JS package through npm. The package can be found at . First, I executed the npm command: npm install --save zenorocha/clipboardjs Next, I added the following line to my app.js file: require(& ...

javascriptlaravelnpm

Struggling to make jquery .ajax cooperate with my PHP JSON data

Question: $.ajax({ type: "POST", url: 'http://blahblah/cow.php', contentType: "application/json", data: { 'guid': '111', 'score': 592, 'initi ...

phpjqueryjson

Fullcalendar inaccurately displays events

I recently integrated fullcalendar into my website, but I've come across a strange bug. The event is set up correctly with all the necessary information, yet when the calendar loads, it appears in the wrong position and for the wrong duration. However ...

javascriptfullcalendar

Firestore query failing to retrieve most recent data

I have implemented a route guard in Angular that validates a specific value in firestore before granting access to the designated route. The component is accessed only after an HTTP cloud function has finished executing. This cloud function generates an o ...

javascriptangularfirebasegoogle-cloud-firestorerxjs

Using Javascript to Divide Table into Separate Tables each Containing a Single Row

Is there a way to divide the content of this table into three separate tables using JavaScript? It is important that each table retains its header information. Unfortunately, I am unable to modify the id's or classes as they are automatically generat ...

javascriptjquerysplithtml-table

Different applications of data streaming apart from multimedia content

Exploring the various applications of streaming, particularly when sending data from a server to a visual client such as a web browser or an application, has sparked my curiosity. While I grasp the fundamental idea of transmitting data in chunks rather t ...

javascriptnode.jsstreamstreaming

PHP script encountering difficulty inserting data into database when AJAX is utilized; functions flawlessly without AJAX

In my "user registration" file, there is a form with the following structure: <form action="" method="POST"> <label for="user" class="control-label">User </label> <input type="text" name="user" class="form-control" id="user" ...

javascriptphpmysqlajax