Cursor management and content formatting method and program product in browser environment

Abstract

The invention provides a cursor management and content formatting method in a browser environment. The method comprises the following steps: creating an editable area in the browser environment; monitoring input operation of a user, acquiring data of the editable area in real time, monitoring the editable area, and detecting content change of the editable area; monitoring and managing the position of the cursor, acquiring the position of the current cursor as an initial position, and recovering the cursor to the initial position after the content is inserted or deleted; when a user inputs specific content or characters, the specific content is automatically identified through regular expression matching or a keyword extraction algorithm, and the specific content is converted into corresponding formatted output; and generating a corresponding rich text data format according to the input content of the user, and updating and displaying the rich text data format in the editable area in real time. According to the method and the device, the phenomenon of cursor skipping or losing is avoided, the continuity of user input experience is improved, and meanwhile, the input content is converted into formatted output, so that the structuralization and readability of the input content are improved.

Description

Technical Field

[0001] The present invention relates to the technical field of text editing in a browser environment, and in particular to a cursor management and content formatting method and a program product in a browser environment. Background Art

[0002] Currently, in browser-side development, browser native input boxes are usually used to process user text input. Although such input boxes can meet basic text input needs, their functions show obvious limitations when faced with complex interactive scenarios.

[0003] Existing web-side input boxes can usually only process plain text data, and users cannot freely insert multimedia content other than text into the input box, such as pictures, emoticons, text blocks, etc. This functional limitation is obviously not enough for the complex interaction requirements of modern web applications. With the continuous development of application scenarios such as social media, instant messaging tools, and online document collaboration, users not only want to input text content, but also want to be able to insert multiple content forms such as pictures, emoticons, and custom tags at the same time. These functions are not fully supported at present and cannot adapt to the increasingly complex rich text editing needs. When faced with complex editing interactions, the performance of existing input boxes is not ideal. For example, when users input emoticons and pictures, they usually need to rely on the backend or plug-ins to implement it, and cannot achieve seamless emoticon and picture insertion on the browser side. In addition, the existing input boxes also have obvious deficiencies in processing content formatting, and lack the ability to automatically process complex formats (such as HTML tags, @ tags, multimedia content, etc.). In actual use, the formatting and display of rich text usually requires a lot of customized development to complete. Since most existing input boxes can only support plain text interactions, when users insert non-text content (such as emoticons, pictures, or other custom tags), the cursor position may be abnormal or unexpectedly moved. This is particularly evident in cross-platform scenarios. For example, on mobile devices (such as iOS and Android), the cursor often cannot be accurately reset after inserting or deleting content, affecting the user's editing experience. At the same time, a large number of invalid tags, line breaks, and special characters often appear in the input content, and the existing technology lacks the ability to efficiently handle these formatting issues.

[0004] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present invention, and therefore may include information that does not constitute the prior art known to ordinary technicians in the field. Summary of the invention

[0005] In view of the problems in the prior art, the present invention aims to solve the problems in the prior art of inaccurate cursor management, inconsistent content formatting and inefficient processing of specific content when processing user input in an editable area.

[0006] An embodiment of the present invention provides a method for cursor management and content formatting in a browser environment, comprising the following steps:

[0007] Use the contenteditable attribute to create an editable area in the browser environment, which responds to the user entering text and inserting elements into the area.

[0008] Monitor the user's input operations and obtain the DOM data of the editable area in real time. Monitor the editable area through MutationObserver to detect content changes in the editable area.

[0009] Monitor and manage the cursor position, get the current cursor position as the initial position through window.getSelection().getRangeAt(0), and restore the cursor to the initial position after inserting or deleting content;

[0010] When the user enters specific content or characters, the regular expression matching or keyword extraction algorithm is used to automatically identify specific content such as emoticons, @ tags, pictures, etc., and convert them into corresponding formatted output;

[0011] Format the user input by removing unnecessary HTML tags, line breaks and special symbols to ensure that the data submitted to the server is cleaned and valid data;

[0012] The corresponding rich text data format is generated according to the user's input content, and is updated and displayed in the editable area in real time.

[0013] In some embodiments, monitoring and managing the cursor position includes the following steps:

[0014] Monitor changes in text nodes in the editable area. When a text node is detected to be deleted or modified, automatically check the previous adjacent node.

[0015] If the previous node is a span node, delete the span node to avoid jumping to the end of the span when the cursor moves, ensuring correct management of the cursor position.

[0016] In some embodiments, the specific content is automatically identified and converted into corresponding formatted output through regular expression matching or keyword extraction algorithm, including the following steps:

[0017] When the user enters the ":" or "@" character, the subsequent input content is automatically obtained and the emoticon or @ tag is matched through regular expressions;

[0018] Convert emojis to corresponding image tags and insert it into an editable area, or convert the @ tag to Tags to specify the target users.

[0019] In some embodiments, formatting the content input by the user by removing unnecessary HTML tags, line breaks and special symbols includes the following steps:

[0020] Use regular expressions to remove invalid tags from user input, including Tags, unclosed tags, and invalid HTML structure;

[0021] Filter out invalid spaces, line breaks, and special characters to ensure that user input is valid data after formatting.

[0022] In some embodiments, the above method further includes rendering the emoticon and @ tag content input by the user, including the following steps:

[0023] Get the text content containing emoticons and @ tags, and match [emoticons] and @ user patterns through regular expressions;

[0024] Use dangerouslySetInnerHTML or similar to insert the processed user input into the edit area, replacing matching emoticons with the corresponding emoticon images. tag and replace the @ tag with formatted text containing the user information Label.

[0025] In some embodiments, the above method further includes processing the user-pasted content, including:

[0026] Listen for paste events in the editable area, and get the pasted content when a user paste operation is detected;

[0027] Detect and filter illegal characters, unclosed tags or HTML structures that do not conform to standards in pasted content;

[0028] Keep only legal text, images, or emoticons and insert them into editable areas.

[0029] In some embodiments, the above method further includes: providing undo and redo functions for rich text editing operations based on the content input by the user, and allowing the user to undo or restore the previous editing operation at any time during the editing process by recording each step of the user's operation.

[0030] In some embodiments, the above method further includes: monitoring whether the content input by the user exceeds the predefined character or data limit, and when it is detected that the content input by the user exceeds the limit, automatically intercepting and limiting the number of characters input, and prompting the user that the input exceeds the limit.

[0031] In some embodiments, the above method further includes dynamically adjusting the layout of the editable area according to the content input by the user, including:

[0032] When it is detected that the content entered by the user exceeds the display range of the current editable area, the editing area is automatically expanded or reduced;

[0033] Dynamically adjust the height and width of the editing area based on the multimedia or long text content inserted by the user to ensure that the user can fully view and edit all content.

[0034] Another aspect of the present invention also provides a program product for cursor management and content formatting in a browser environment. The program product includes computer instructions. When the computer instructions are executed by a processor, the steps of the above-mentioned method for cursor management and content formatting in a browser environment are implemented.

[0035] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure.

[0036] The method and program product for cursor management and content formatting in a browser environment of the present invention have the following beneficial effects:

[0037] The present invention obtains and restores the cursor position to ensure accurate management of the cursor when inserting or deleting content, avoids the phenomenon of cursor jumping or loss, and improves the consistency of user input experience. The present invention can automatically identify and convert specific content, convert it into formatted output, and improve the structuring and readability of the input content. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] Other features, objectives and advantages of the present invention will become more apparent from a reading of the detailed description of non-limiting embodiments made with reference to the following accompanying drawings.

[0039] Figure 1 is a flow chart of a method for cursor management and content formatting in a browser environment according to an embodiment of the present invention;

[0040] Figure 2 is a flow chart of a method for monitoring and managing a cursor position in a method for cursor management and content formatting in a browser environment according to an embodiment of the present invention;

[0041] Figure 3 It is a flow chart of a method for automatically identifying specific content and converting it into corresponding formatted output by regular expression matching or keyword extraction algorithm in a method for cursor management and content formatting in a browser environment according to an embodiment of the present invention;

[0042] Figure 4 It is a flow chart of a method for formatting user input content by removing unnecessary HTML tag line breaks and special symbols in a method for cursor management and content formatting in a browser environment according to an embodiment of the present invention;

[0043] Figure 5 It is a flowchart of a method for cursor management and content formatting in a browser environment according to another embodiment of the present invention. DETAILED DESCRIPTION

[0044] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that the disclosure will be more comprehensive and complete and to fully convey the concepts of the example embodiments to those skilled in the art. The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments.

[0045] In addition, the accompanying drawings are only schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the figures represent the same or similar parts, and their repeated description will be omitted. Some of the block diagrams shown in the accompanying drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or implemented in one or more hardware modules or integrated circuits, or implemented in different networks and / or processor devices and / or microcontroller devices.

[0046] The flowcharts shown in the accompanying drawings are only exemplary and do not necessarily include all the steps. For example, some steps may be decomposed, while some steps may be combined or partially combined. Therefore, the actual execution order may be changed according to the actual situation.

[0047] The invention provides a method for cursor management and content formatting in a browser environment, which is implemented by technologies such as HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), JavaScript (Scripting Language), Regular Expressions (Regular Expression), Mutation Observer API (DOM Change Observer), Clipboard API (Clipboard Interface), etc., and includes the following steps: First, an editable area is created in the browser environment, which serves as an interface for users to input text and insert elements, allowing users to perform various operations. The editable area not only supports the input of plain text, but also can respond to the user's rich text operations, such as inserting pictures or other elements. Secondly, the browser monitors the user's input operations in the area in real time, and obtains the relevant data of the editable area by capturing each text input, deletion or insertion of the user, thereby ensuring the browser's real-time response capability to the user's operations. At the same time, the browser also detects changes in the content of the area through a monitoring mechanism, including changes such as addition, deletion and modification of text nodes, so as to respond to the next operation in a timely manner. In terms of cursor management, the browser can accurately monitor and manage the position of the cursor, obtain the initial position of the cursor before the user performs text operations, and automatically restore the cursor to the initial position after the user inserts or deletes content, thereby ensuring the consistency and fluency of the operation. Especially when it comes to inserting complex content, such as pictures or emoticons, accurate recovery of the cursor position is particularly important. When the user enters specific content or characters, such as ":" or "@" characters, the browser automatically identifies these specific characters through regular expression matching or keyword extraction algorithms, and converts them into corresponding formatted output according to preset rules. This conversion is not limited to simple replacement of text content, but can also be extended to the embedding of rich text elements such as pictures and emoticons. To ensure the standardization of the input content, the browser will also format the content entered by the user. By automatically removing unnecessary HTML tags, invalid line breaks and special symbols, the simplicity and standardization of the input content are guaranteed, and the impact of invalid characters on text display or storage is avoided. Finally, the browser generates the corresponding rich text data format based on the user's input content, and updates the formatted data in the editable area in real time, so that the user can directly view the processed content. Through precise cursor management, automatic content formatting and rich text data generation, the fluency of user editing is improved, the impact of erroneous operations on text content and cursor position is reduced, and the simplicity and consistency of the edited content are guaranteed.

[0048] like Figure 1 As shown, an embodiment of the present invention provides a method for cursor management and content formatting in a browser environment, comprising the following steps:

[0049] S100. Use the contenteditable attribute to create an editable area in the browser environment to respond to the user's input of text and insertion of elements in the area. In this embodiment, the contenteditable attribute is used to allow the editable area to directly respond to the user's keyboard input, text insertion, content editing and other operations. contenteditable is an attribute of the HTML element. When the attribute is set to true, the browser allows the user to directly input and edit text in the element. The purpose of this step is to provide the user with a front-end interface with editing capabilities, allowing the user to input and insert text and elements in the browser in a manner similar to a rich text editor.

[0050] S200, monitor the user's input operation, and obtain the DOM (Document Object Model) data of the editable area in real time, monitor the editable area through MutationObserver, and detect the content changes in the editable area. MutationObserver is an asynchronous observation interface that can trigger a callback function when the DOM structure of the page changes. Through the steps of this method, the browser can respond immediately to each input, modification, insertion or deletion operation of the user, ensuring that the content changes of the editable area can be accurately captured and processed by the browser. This process is crucial for detecting, analyzing and processing the data input by the user.

[0051] S300, monitor and manage the cursor position, obtain the current cursor position as the initial position through window.getSelection().getRangeAt(0), and restore the cursor to the initial position after inserting or deleting content. Cursor management is a major innovation of this invention. The browser obtains the current cursor position by calling window.getSelection().getRangeAt(0) and records it as the initial position. When the user performs an insert or delete operation, the position of the cursor will change. In order to ensure the smoothness of user editing and the continuity of the cursor position, the browser will restore the cursor to the initial position before the operation after each operation is completed. This mechanism ensures that the cursor will not be misplaced or jumped after complex operations (such as inserting pictures or emoticons), and can better manage the user's text editing experience.

[0052] S400. When a user inputs specific content or characters, the specific content such as emoticons, @ tags, pictures, etc. is automatically identified through regular expression matching or keyword extraction algorithms, and converted into corresponding formatted outputs. The specific content input by the user is identified using regular expression matching and keyword extraction algorithms. Specifically, when a user inputs specific characters such as : or @, the browser detects subsequent content through preset rules and converts the matching content (such as emoticons, @ tags, pictures, etc.) into corresponding formatted outputs. This step enriches the functionality of the text editor and enhances the user's editing flexibility by converting the specific symbols or keywords input by the user into rich text elements (such as pictures, hyperlinks, etc.).

[0053] S500, by removing unnecessary HTML tags, line breaks and special symbols, the content input by the user is formatted to ensure that the data submitted to the server is valid data after cleaning. To ensure the standardization of the content and the validity of the data, the browser will also format the content input by the user. By automatically removing unnecessary HTML tags, line breaks and special symbols, the browser can clean up redundant or invalid information in the user input. This step ensures that the data submitted to the server is valid data after cleaning, avoiding storage or display problems caused by invalid content.

[0054] S600: Generate corresponding rich text data format according to the user's input content, and update and display it in the editable area in real time. This step ensures that the user can preview the input and formatted text or rich media content in real time on the front-end interface, thereby improving the user's interactive experience.

[0055] The various method steps of the present invention are not limited to the above specific implementation methods. Those skilled in the art may make appropriate changes to the implementation methods without departing from the spirit and scope of the present invention. For example, the monitoring method used is not limited to MutationObserver, and other mechanisms that can be used to monitor DOM changes can also achieve similar functions. Similarly, for the cursor management mechanism, window.getSelection() is only one of the implementation methods, and other APIs or tools for obtaining the cursor position can also be used to replace or supplement. In addition, the recognition and conversion of specific content is not limited to emoticons and @ tags, and other symbols, keywords, hyperlinks, etc. can also be expanded through similar algorithms.

[0056] like Figure 2 As shown, in some embodiments, monitoring and managing the cursor position includes the following steps:

[0057] S310, monitor the text node changes in the editable area, and automatically check the previous adjacent node when it is detected that the text node is deleted or modified. When the user enters text or deletes in the editable area, the browser monitors the changes of DOM through MutationObserver. Once it is detected that the text node is modified or deleted, the browser will immediately perform an automatic check. The importance of this step is to ensure that every change in the content can be accurately captured, thereby providing a timely information basis for cursor management and content formatting.

[0058] S320. If the previous node is a span node, delete the span node to avoid the cursor jumping to the end of the span when moving, ensuring the correct management of the cursor position. After automatically checking the previous adjacent node, if the previous node is a span node, the browser will delete the span node to avoid the cursor jumping to the end of the span when moving. Span nodes are usually used to wrap text content to facilitate style application or special processing. When the user modifies or deletes text, the span node may cause the cursor to jump to its end, causing trouble to the user. By deleting unnecessary span nodes in a timely manner, the browser can better maintain the accurate position of the cursor, allowing users to have a smooth and consistent experience during the editing process.

[0059] The monitoring mechanism and cursor position management work together to form an effective interactive logic. When the user performs text editing operations in the editable area, the browser can respond in time and make appropriate processing by monitoring DOM changes. In particular, when processing text node changes, combined with the check of the previous node, the browser can automatically maintain the correct position of the cursor to avoid cursor jumping problems caused by node deletion or modification. This not only improves the user's input experience, but also makes the content management of the editable area more intelligent and user-friendly.

[0060] The method steps and working principle in the present embodiment are not limited to the above-mentioned specific implementation. For the monitoring of text node changes, in addition to using MutationObserver, other DOM events and detection mechanisms can also be used to replace or supplement, such as monitoring input events (input) and keyboard events (keydown, keyup) etc. About the management of cursor position, although the present embodiment focuses on processing span nodes, in fact, more extensive cursor management functions can be realized by analyzing more different types of nodes and content structures. Therefore, the implementation of the present invention has higher flexibility and can adapt to a variety of different scenes and needs.

[0061] like Figure 3 As shown, in some embodiments, the specific content is automatically identified and converted into corresponding formatted output through regular expression matching or keyword extraction algorithm, including the following steps:

[0062] S410. When it is detected that the user inputs ":" or "@" characters, the subsequent input content is automatically obtained, and the emoticons or @ tags are matched through regular expressions. Specifically, when the user inputs ":", the browser will start to detect the text input thereafter in order to recognize emoticons. When "@" is input, the browser will treat the subsequent text as a user mention (@ tag). As a text processing tool, regular expressions can efficiently match text patterns that conform to preset rules, thereby identifying emoticons or specified users that the user may wish to insert.

[0063] S420, converting emoticons into corresponding image tags and insert it into an editable area, or convert the @ tag to Tags are used to specify the target user. Specifically, for emoticons, the browser will replace them with corresponding image files (such as emoticon package images) according to pre-set rules or databases, and insert The @ tag is rendered in the editable area. The browser replaces it with Tags are used to embed the target user's information, which usually includes the user name, user ID, etc., to facilitate subsequent user interaction or data processing. This formatted output ensures that the content entered by the user is displayed in the editable area as an image or in a special format, making the text content richer and more visual.

[0064] The method steps of this embodiment show how to enhance the interactive capabilities of the editable area by automatically identifying and formatting the user input. When the user enters ":" or "@", the browser can not only quickly identify these specific characters, but also provide a flexible matching mechanism through regular expressions to identify the content format expected by the user. This mechanism complements the cursor management, ensuring a smooth experience for users when editing content and avoiding visual and functional interruptions caused by formatting.

[0065] The method steps and working principle of this embodiment are not limited to the above specific implementation. In addition to using ":" and "@" characters to identify specific content, the browser can also expand other trigger characters or combinations (such as "#" for topic tags) to further enrich the user's input experience. For formatted output, although this embodiment uses and Tags, but can be replaced with other standard HTML tags or structures according to actual needs, so as to adapt to different scenarios and needs. Therefore, the implementation of the present invention shows good flexibility and scalability.

[0066] like Figure 4 As shown, in some embodiments, formatting the content input by the user by removing unnecessary HTML tags, line breaks and special symbols includes:

[0067] S510, using regular expressions to remove invalid tags in user input, including tags, unclosed tags, and invalid HTML structures. Specifically, browsers can identify and remove Tags, unclosed tags, and other invalid HTML structures. Using regular expressions, you can write pattern matching rules to detect and remove these non-compliant tags, thereby cleaning up user input. The purpose of this step is to ensure that the data submitted by the user does not contain redundant HTML code to prevent rendering problems or data processing errors caused by invalid tags.

[0068] S520, filter out invalid spaces, line breaks and special characters to ensure that the content entered by the user is valid data after formatting. This method also relies on regular expressions. By setting a suitable matching mode, it can efficiently detect and remove extra spaces (such as multiple consecutive spaces), line breaks (such as \n, \r\n) and other unnecessary special characters. By cleaning up these invalid characters, it is ensured that the final text content is neat and easy to process, further improving the usability of the data.

[0069] The method steps of this embodiment form an efficient text processing mechanism through the use of regular expressions. When users input data, various invalid elements may be introduced due to copying and pasting or manual input, affecting the quality of the data. Through the browser's automatic formatting processing, not only the user experience is improved, ensuring that the content submitted by the user meets the preset standards, but also helps the smooth processing of back-end data. This automatic formatting mechanism complements the characteristics of cursor management and real-time content update in the present invention, and together improves the overall functionality of the editable area.

[0070] The method steps and working principle in the present embodiment are not limited to the above-mentioned specific implementation. Although the present embodiment mainly processes the removal of HTML tags, spaces, and line breaks, the browser can be flexibly extended to other types of invalid data detection and cleaning. For example, more regular expression patterns can be added according to actual needs to identify and process other common input problems (such as redundant punctuation marks or specific sensitive words). Therefore, the present invention shows good flexibility and adaptability to meet the user needs in different application scenarios.

[0071] In some embodiments, the above method further includes rendering the emoticon and @ tag content input by the user, including the following steps:

[0072] Get the text content containing emoticons and @ tags, and match [emoticons] and @user patterns through regular expressions. In order to identify these specific contents, the browser uses regular expressions to analyze the input text. Through pre-defined patterns, the browser can accurately identify the parts of the text that match emoticons and @ tags. For example, you can use regular expressions to match user names starting with "@" and emoticons in the shape of [emoticons]. This step ensures that the browser can dynamically capture the user's input intention and identify special content that needs to be formatted.

[0073] Use dangerouslySetInnerHTML or similar to insert the processed user input into the edit area, replacing matching emoticons with the corresponding emoticon images. tag and replace the @ tag with formatted text containing the user information Specifically, for matching emojis, the browser will replace them with the corresponding image tags ( ) to ensure that the emoticon can be displayed as an image. For the @ tag, the browser will replace it with formatted text with user information ( Tags) to display the identity information of related users in subsequent operations. This method not only improves the readability and interactivity of user input content, but also combines with the real-time update function to ensure that users can intuitively see the formatting effect when editing content.

[0074] The method steps of this embodiment enable users to experience the interactive effect of instant feedback when entering emoticons or @ tags. Through the flexible application of regular expressions, combined with the dynamic insertion of HTML elements, the content format can be effectively managed without interfering with the user's editing experience. An efficient cursor management and content formatting method is formed, providing users with a more user-friendly editing environment. This mechanism solves the problem of insufficient support for complex interactive scenarios in the prior art, allowing users to use various formatting functions smoothly in a browser environment.

[0075] The method steps and working principle in this embodiment are not limited to the above-mentioned specific implementation. In practical applications, the browser can expand the matching mode of the regular expression according to the needs to support more types of formatted content. In addition, although the dangerouslySetInnerHTML method is mentioned, other implementations (such as rendering content through the state management of the React component) are also feasible. Therefore, the present invention shows good flexibility and adaptability to meet the diverse user needs and the user experience in different scenarios.

[0076] In some embodiments, the above method further includes processing the user pasted content, including the following steps:

[0077] Listen for paste events in the editable area, and get the pasted content when a user paste operation is detected. This method ensures that the browser can respond to user operations in a timely manner and provide raw data for subsequent content processing.

[0078] Detect and filter illegal characters, unclosed tags, or HTML structures that do not conform to standards in the pasted content. Specifically, the browser will scan the illegal characters, unclosed tags, and HTML structures that do not conform to standards in the pasted content. Using regular expressions and DOM parsing technology, the browser can effectively identify and remove these invalid parts to ensure the rationality and validity of the content structure in the editable area. It can effectively avoid the situation where the content pasted by the user may contain various data that do not conform to the expected format, and direct insertion will lead to format confusion or potential security issues.

[0079] Only legal text, images, or emoticons are retained and inserted into the editable area. This method not only ensures that the content seen by the user is cleaned and formatted, but also ensures that the content in the editing area remains neat and consistent after the user pastes. When editing text or performing other operations, users can focus on the actual content without having to worry about formatting confusion or unexpected behavior caused by the paste operation.

[0080] The method steps of this embodiment can improve the user's operating experience in the browser environment, and ensure the validity and availability of the pasted content by dynamically monitoring and processing the user's paste operation. Combined with the above method, the continuity of cursor management and content formatting is ensured, so that users can obtain a smooth and expected editing experience when performing complex interactions. This method effectively solves the problem of improper handling of non-standard input content in the prior art, thereby enhancing the stability and reliability of the editable area.

[0081] In some embodiments, the above method further includes: providing undo and redo functions for rich text editing operations based on the content input by the user, and allowing the user to undo or restore the previous editing operation at any time during the editing process by recording each step of the user's operation. In this embodiment, these listening operations are captured in real time by event listeners and stored in an operation stack. Whenever a user performs an operation, the browser will record the detailed information of the operation (such as operation type, content status before the operation, content status after the operation, etc.) for subsequent undo or redo operations. When the user needs to undo an operation, the browser will pop up the most recent operation from the operation stack and restore the content of the editable area to the state before the operation. This process is achieved by updating the DOM structure and the cursor position to ensure that the user's editing experience is smooth and consistent. If the user wants to redo an operation that has been undone, the browser will push the operation back into the stack accordingly and update the content of the editable area so that the user can continue to edit.

[0082] This embodiment aims to enhance the user's editing experience in the browser environment, allowing the user to flexibly process the content they input and avoid content loss due to operational errors. Combined with the above method, this undo and redo function not only ensures the effective management of content, but also enhances the user's confidence and flexibility in complex interactive scenarios. Especially when processing rich text formats, it allows users to adjust content at any time during the editing process without having to worry about careless operations causing data loss or unrecoverable errors.

[0083] In some embodiments, the above method further includes: monitoring whether the content input by the user exceeds the predefined character or data limit, and when it is detected that the user input exceeds the limit, automatically intercepting and limiting the number of characters input, and prompting the user that the input exceeds the limit. In this embodiment, the browser can operate the DOM through JavaScript to delete or prevent the input of characters that exceed the limit, ensuring that the content in the editable area always remains within the preset range. While performing character interception, the browser will prompt the user that the input content exceeds the limit. The prompt method can be implemented through a pop-up box, displaying a warning message below the editable area, or other UI feedback mechanisms, so that the user can adjust the input content in time. This prompt mechanism can be flexibly configured according to different scenarios to ensure that users can clearly understand the input restrictions and make modifications quickly.

[0084] In some embodiments, the above method further includes dynamically adjusting the layout of the editable area according to the content input by the user, including:

[0085] When it is detected that the content input by the user exceeds the display range of the current editable area, the editing area is automatically expanded or reduced. In this embodiment, the detection can be achieved by analyzing the height and width changes of the DOM element, for example, by determining whether the content exceeds the visible area through attributes such as scrollHeight or scrollWidth. If scrollHeight is greater than the clientHeight of the current editable area, or scrollWidth is greater than clientWidth, it means that the content exceeds the current display range. When it is detected that the content exceeds the display range, the system automatically adjusts the size of the editing area according to the size of the actual content. Specifically, the height and width style attributes of the editable area can be set to increase it to a size suitable for displaying all the content. This process can be performed by continuously determining scrollHeight and scrollWidth, gradually increasing height and width until all content is within the visible area. Similarly, if the content is deleted and the new content no longer fills the current editing area, it will also be determined by monitoring the changes in scrollHeight and scrollWidth whether the content height and width are less than the size of the current editable area. If it is less than the current visible area, the height and width are reduced to match the editing area with the content size to avoid unnecessary blank areas. As the user types or deletes, the editing area will dynamically expand or shrink according to the changes in the content, ensuring that the user can always see the complete content during the editing process without scrolling the view.

[0086] According to the multimedia or large text content inserted by the user, the height and width of the editing area are dynamically adjusted to ensure that the user can fully view and edit all the content. In this embodiment, the editing area is dynamically adjusted by modifying the CSS style attributes corresponding to the editing area, such as height and width, to ensure that all input content can be fully displayed in the editing area. At the same time, the browser can also set the minimum and maximum boundary values ​​as needed to avoid unlimited expansion of the editing area. In other scenarios, if the user deletes a large amount of content or reduces the inserted multimedia elements, the browser will automatically reduce the editing area according to the reduction of content. This function ensures that the editor can adapt to large text or multimedia input, and can also maintain a simple layout when reducing the input content. For example, when a user inserts a large picture, the browser not only adjusts the height, but also adapts to the width of the picture by changing the width attribute, thereby avoiding the picture from being cropped or incompletely displayed. In addition, if the user enters a large amount of text, the browser can gradually increase the height of the editing area according to the number of text lines, so that the user can fully view and edit his input content without additional scrolling.

[0087] like Figure 5 FIG. 2 is a flowchart of a method for cursor management and content formatting in a browser environment according to another embodiment of the present invention, comprising the following steps:

[0088] Use the contenteditable attribute to create an editable area that allows users to enter text and insert other elements, and define its id = chat-input.

[0089] The attribute ref={iptRef} of the tag is used to actively process the focus and defocus of the editing area.

[0090] Get document.getElementById('chat-input') to get the DOM data of the editable area, use the MutationObserver solution to observe the editable area to handle the cursor problem when deleting the entire block on iOS, use the mutation observer to listen to when the middle text node (the space separating the span) is deleted, once the deletion operation is heard, check the previous sibling node, if it is a span, delete it. In this way, it can be ensured that the cursor will not reach the span, so there will be no abnormal movement of the focus or cursor, such as the cursor moving to the far right, thus achieving cursor management.

[0091] After that, use the onInput method to monitor the user's input process. At the same time, obtain the HTML input situation of the current editing area through let nowHtml = document.getElementById('chat-input').innerHTML. At this time, it is necessary to remove the useless label part of the user data and only obtain the real input content, including the following steps:

[0092] First, use the command / <img[^>]+data-text="([^"]*)"[^>]*> / g to replace the custom emoji pictures;

[0093] After that, use the command / <span\s+data-msg="9"[^>]*?\bdata-text=

[0094] "([^"]*)"[^>]*?>.*? / g to replace the @ tags and obtain the real data;

[0095] Use the regular expression relText.replace( / |<br\ / > / g,'\n').replace( / <\ / br> / g,”) to remove the line breaks;

[0096] Use the command / <img src＝"blob:https:\ \ .*？"> / g to match the keyboard label symbols and remove them when there are keyboard label symbols;

[0097] Use the regular expression: / ^[\s\n]*$ / to remove the spaces, and finally obtain the real data and submit the data in a typical format, such as '123[smile]@张三900io';

[0098] Retrieve keywords, such as @, etc., and pop up the corresponding selected data that meets the requirements.

[0099] Use the attribute method of the command dangerouslySetInnerHTML = {{__html:drawChatInnerHtml({content:textMsg})}} of the label to perform rendering so that the user can see the rendered situation, including the following steps:

[0100] Use the command / \[([^[\]]+)\] / g to obtain the part in the text that needs to render the picture emoji and replace it with <imgclass='chat-li-item-emoji'data-text='${group1}'

[0101] src='${src}'>, and at the same time use the defined label data-text to record the identifier of the picture;

[0102] After obtaining the group members, use the command new RegExp(`@${_name}`,'g') to distinguish whether there is a @personnel module in the text. If so, replace it directly. <span data-msgtype＝'9'key＝${group1}class＝'social-chat-li-item-at'data-sid＝'${encode(_uid)}'contenteditable＝'false'> @${_name} `, in this method, it is important to note that @ needs to leave a space at the end of the text block, which can be used to distinguish between deleting the entire block and distinguishing the text input when deleting.

[0103] Use useRef to set a focus position positionRef, and positionRef.current = window.getSelection().getRangeAt(0) to record the focus position. Through this step, the cursor position can be restored after inserting the formatted content in the middle of the input.

[0104] Use the web's paste method to process the data pasted into the editor, replace the @ function display, display pictures and emoticons, limit the font of the input box text, remove redundant DOM structures, and other related extended functions.

[0105] The embodiment of the present invention also provides a program product for cursor management and content formatting in a browser environment, the program product includes computer instructions, and when the computer instructions are executed by a processor, the steps of the method for cursor management and content formatting in the browser environment are implemented. The computer instruction function of this embodiment can be implemented by the specific implementation method of the method for cursor management and content formatting in the browser environment as described above, which will not be described in detail here.

[0106] The specific embodiment of the present invention enriches the input experience of the Web page by introducing a multi-functional input box. Compared with the traditional method that only supports text input, it can support multiple input types such as pictures, emoticons, text blocks, etc. By using the contenteditable attribute to create an editable area, the present invention not only maintains the advantages of native text input, but also automatically identifies and replaces identification characters through specific matching rules, and renders and displays elements such as emoticons, pictures, and @ tags. At the same time, the present invention implements an input detection function, which can support the expansion of custom interaction scenarios, such as the @ function. In addition, by intercepting the pasted content, the insertion of non-standard or abnormal data is effectively prevented, ensuring the stability of the input box and user experience in complex interaction scenarios. Therefore, the present invention has broad application prospects in scenarios such as chatting and commenting that require rich input content, and significantly improves the interactivity and usability of the system.

[0107] The above contents are further detailed descriptions of the present invention in combination with specific preferred embodiments, and it cannot be determined that the specific implementation of the present invention is limited to these descriptions. For ordinary technicians in the technical field to which the present invention belongs, several simple deductions or substitutions can be made without departing from the concept of the present invention, which should be regarded as falling within the protection scope of the present invention.

Claims

1. A method for cursor management and content formatting in a browser environment, characterized in that: The steps include: Create an editable area in the browser environment to respond to the user's operation of entering text and inserting elements in the area; Monitor the user's input operations, obtain the data of the editable area in real time, monitor the editable area, and detect changes in the content of the editable area; Monitor and manage the cursor position, obtain the current cursor position as the initial position, and restore the cursor to the initial position after inserting or deleting content; When the user enters specific content or characters, the specific content is automatically identified through regular expression matching or keyword extraction algorithms, and converted into corresponding formatted output; Format the user input by removing unnecessary HTML tags, line breaks and special symbols; The corresponding rich text data format is generated according to the user's input content, and is updated and displayed in the editable area in real time.

2. The method for cursor management and content formatting in a browser environment according to claim 1, characterized in that: The monitoring and managing of the cursor position also includes the following steps: Monitor changes in text nodes in the editable area. When a text node is detected to be deleted or modified, automatically check the previous adjacent node. If the previous node is a span node, delete the span node to avoid jumping to the end of the span when the cursor moves, ensuring correct management of the cursor position.

3. The method for cursor management and content formatting in a browser environment according to claim 1, characterized in that: The method of automatically identifying specific content through regular expression matching or keyword extraction algorithm and converting it into corresponding formatted output includes the following steps: When the user inputs ":" or "@" characters, the subsequent input content is automatically obtained and the emoticon or @ tag is matched through regular expressions; Convert emojis to corresponding image tags and insert it into an editable area, or convert the @ tag to Tags to specify the target users.

4. The method for cursor management and content formatting in a browser environment according to claim 1, characterized in that: The method of formatting the content input by the user by removing unnecessary HTML tags, line breaks and special symbols comprises the following steps: Use regular expressions to remove invalid tags from user input, including Tags, unclosed tags, and invalid HTML structure; Filter out invalid spaces, line breaks, and special characters to ensure that user input is valid data after formatting.

5. The method for cursor management and content formatting in a browser environment according to claim 1, characterized in that: The method further includes rendering the emoticon and @ tag content input by the user, including the following steps: Get the text content containing emoticons and @ tags, and match [emoticons] and @ user patterns through regular expressions; Insert the processed user input into the editing area, replace the matching emoticons with the corresponding emoticon images, and replace the @ tag with formatted text containing user information.

6. The method for cursor management and content formatting in a browser environment according to claim 1, characterized in that: The method further includes processing the user-pasted content, including the following steps: Listen for paste events in the editable area, and get the pasted content when a user paste operation is detected; Detect and filter illegal characters, unclosed tags or HTML structures that do not conform to standards in pasted content; Keep only legal text, images, or emoticons and insert them into editable areas.

7. The method for cursor management and content formatting in a browser environment according to claim 1, characterized in that: The method further includes: providing undo and redo functions for rich text editing operations based on the content input by the user, and allowing the user to undo or restore the previous editing operation at any time during the editing process by recording each step of the user's operation.

8. The method for cursor management and content formatting in a browser environment according to claim 1, characterized in that: The method further includes: monitoring whether the content input by the user exceeds the predefined character or data limit, and when it is detected that the content input by the user exceeds the limit, automatically intercepting and limiting the number of characters input, and prompting the user that the input exceeds the limit.

9. The method for cursor management and content formatting in a browser environment according to claim 1, characterized in that: The method further includes dynamically adjusting the layout of the editable area according to the content input by the user, including: When it is detected that the content entered by the user exceeds the display range of the current editable area, the editing area is automatically expanded or reduced; Dynamically adjust the height and width of the editing area based on the multimedia or long text content inserted by the user to ensure that the user can fully view and edit all content.

10. A cursor management and content formatting program product in a browser environment, characterized in that: The program product includes computer instructions, which, when executed by a processor, implement the steps of the method for cursor management and content formatting in a browser environment according to any one of claims 1 to 9.

Images